2013-03-22 71 views
10

我在視圖中編寫了這個,然後試圖在結果上調用.datepicker(),但沒有任何反應。.datepicker在Durandal裏面調用激活函數不起作用

撰寫容器

<div> 
<!--ko compose: { model:'viewmodels/schedule', view: 'views/schedule.html', activate:true} --> 
<!--/ko--> 
</div> 

schedule.html

<div class="schedule-editor"> 

</div> 

和調度模塊

define([], function() { 
    var vm = { 
     activate: activate, 
    }; 
    return vm; 

    function activate() { 
     $('.schedule-editor').datepicker(); 
     console.log("activated schedule module"); 
     return true; 
    } 
}); 

孔索le記錄「激活時間表模塊」,但日期選擇器未創建。 如果我去chrome控制檯並運行jQuery調用,它會彈出datepicker就好了。

Durandal文檔聲稱在DOM完全組合後調用activate函數,所以我不知道還有什麼可以嘗試的。

+3

嘗試將你的jQuery邏輯放入'viewAttached'方法而不是'activate'方法。 – nemesv 2013-03-22 21:18:56

回答

11

像nemesv提到你應該使用viewAttached來代替。

define([], function() { 
    var vm = { 
     viewAttached: viewAttached, 
    }; 
    return vm; 

    function viewAttached(view) { 
     $(view).find('.schedule-editor').datepicker(); 
     console.log("activated schedule module"); 
     return true; 
    } 
}); 

激活發生在您的模型已被數據綁定到新視圖和視圖添加到dom之前的生命週期中。 viewAttached發生在視圖被數據綁定到你的模型並附加到dom之後。

編輯

迪朗達爾2.0已更名viewAttachedattached

+0

我剛剛測試過,它改變了jquery到原來的調用之後工作,做$(view).find沒有工作。否則,現在的作品,謝謝你們 – 2013-03-23 00:59:19

+0

只是爲了提醒 - 「viewAttached」在durandal 2.0中被重新命名爲「附加」,所以使用該名稱代替該版本。 – 2013-09-19 21:56:20

5

還有一個辦法,以這一點,保持忠於該knockout.js和迪朗達爾正在努力爭取聲明UI理念。

它將使你的HTML這樣的內聲明的日期選擇器:

<div class="schedule-editor" data-bind=" 
    jqueryui: { 
     widget: 'datepicker', 
     options: { 
      // you can set options here as per the jquery ui datepicker docs 
     } 
    }"> 

</div> 

只需在此要點中發現的jQuery用戶界面控件綁定:https://github.com/SteveSanderson/knockout/wiki/Bindings---jqueryui-widgets

確保您有經過以上的javascript你已經加載jquery,jquery ui和淘汰賽。

+1

更喜歡以前的方法,因爲它保持VM清潔。對於具體的處理我想它應該是一個自定義的綁定,淘汰賽也是主張? – ajeeshpu 2013-04-11 13:09:50