如何與knockout.js

添加和刪除jQueryUI的標籤我得到暗示從this sample codes 如何與knockout.js

附帶這裏

<button id='add'>add</button> 

<div data-bind="template: 'tabsTmpl'"></div> 
<script id="tabsTmpl" type="text/html"> 
    <div data-bind="jqTabs: { fx: { } }"> 
     <ul> 
      {{each tabs}} 
      <li> 
       <a href="#tab-${id}">${id}</a> 
      </li> 
      {{/each}} 
     </ul> 
     {{each tabs}} 
     <div id="tab-${id}" >${id}</div> 
     {{/each}} 
    </div> 
</script> 
<script> 
     ko.bindingHandlers.jqTabs = { 
      init: function (element, valueAccessor) { 
       var options = valueAccessor() || {}; 
       $(element).tabs(options); 
      } 
     }; 

     function TabItem(id) { 
      this.id = ko.observable(id); 
     } 

     var viewModel = { 
      tabs: ko.observableArray([new TabItem(1), new TabItem(2), new TabItem(3)]) 
     }; 


     $(function() { 
      ko.applyBindings(viewModel); 

      $('#add').click(function() { 
       viewModel.tabs.push(new TabItem(viewModel.tabs().length + 1)); 
      }); 
     }); 
    </script>

代碼的使用jQuery的模板引擎上面的代碼的作者，但我想用淘汰賽.js'本地模板引擎，所以我改變了html代碼如下：

<div> 
    <div data-bind="jqTabs: { fx: { } }"> 
     <ul data-bind="foreach: tabs"> 
      <li> 
       <a data-bind="attr:{href:'#tab-' + id()}, text:id"></a> 
      </li> 
     </ul> 
     <!-- ko foreach: tabs --> 
     <div data-bind="attr:{id:'tab-'+id()}, text:id"></div> 
     <!-- /ko --> 
    </div> 
</div>

但是，它不起作用。我在做什麼本地模板引擎錯誤？在此先感謝。

來源

2012-09-04 Ray

這是一個正常運作的版本：http://jsfiddle.net/NLGm8/32/

一個關於在jQuery淘汰賽整合最棘手的事情是當插件預計DOM元素在那裏，當淘汰賽會，這使得它們的時機。

通常我會在插件初始化的時候發現一個setTimeout來實現這個功能，它在這裏完成了。

來源

2012-09-04 10:37:33

謝謝約翰，你可以看看這段代碼http://jsfiddle.net/outia24/NLGm8/33/我添加了按鈕來添加標籤，但它沒有按預期工作 – Ray

問題是，自定義綁定不是重新評估。通過添加依賴關係，我們可以解決這個問題。然後我們需要確保在初始化選項卡之前清除任何現有選項卡。我也切換到自定義綁定中的'更新'（因爲我們想對變化做出反應）。這是最後的結果：http://jsfiddle.net/NLGm8/34/ –

這是完美的，約翰。順便說一句，你可以詳細說明爲什麼'如果：標籤（）。長度> 0'代碼需要？我仍然不明白。 – Ray

如何與knockout.js

回答

相關問題