2013-03-26 132 views
1

我與Knockout.js玩耍,創造這個簡單的例子:http://jsfiddle.net/JcTxT/30/爲什麼這個簡單的Knockout.js示例不起作用?

<div id="term_grp" data-role="fieldcontain"><a>Semester:</a> 

<fieldset id="term_fields" data-role="controlgroup" data-type="horizontal"> 
    <input type="radio" name="term" id="ss" value="ss" data-bind="checked: term" /> 
    <label for="ss">Sommersemester</label> 
    <input type="radio" name="term" id="ws" value="ws" data-bind="checked: term" /> 
    <label for="ws">Wintersemester</label> 
</fieldset> 
Term is <span data-bind="text: pommes"></span> 

var aResult = { 
    term: ko.observable("ss"), 
    pommes: "TEST" 
}; 

$(document).on('pagebeforeshow', '#mainPage', function() { 
    ko.applyBindings(aResult); 
}); 

我預期的單選按鈕中的一個來進行檢查(帶有值「SS」但這種情況並非如此有誰知道,爲什麼

乾杯

+1

jQuery Mobile的是你的問題的根源。它改變了可以搞亂綁定的dom。你單選按鈕是綁定的,但jQuery Mobile隱藏它並插入一個未綁定的div和span。 – 2013-03-26 13:03:07

+0

好的,他們的綁定框架是否與jQUery Mobile保持一致? – AntonSack 2013-03-26 13:16:08

回答

2

確定,需要做什麼呢?

添加另一個事件處理程序,並把它添加到綁定:

var aResult = { 
    term: ko.observable("ws"), 
    pommes: "TEST2" 
}; 

ko.bindingHandlers.mobileradio = { 
    init: function (element, valueAccessor) {}, 
    update: function (element, valueAccessor) { 
     var value = valueAccessor(); 
     var valueUnwrapped = ko.utils.unwrapObservable(value); 
     if (valueUnwrapped == $(element).val()) { 
      $(element).prop("checked", "true").checkboxradio("refresh"); 
     } else { 
      $(element).removeProp("checked").checkboxradio("refresh"); 
     } 
    } 
}; 

$(function() { 
    ko.applyBindings(aResult); 
}); 

工作小提琴:http://jsfiddle.net/JcTxT/35/

5

它的工作原理,如果你使用:? $(function() { ko.applyBindings(aResult); }); 並關閉jQuery的手機。

我在你的jsfiddle中試過。

如果你需要jQuery Mobile的,此鏈接: http://www.codesizzle.com/jquery-mobile-radio-with-knockout-js/

+0

好的,但我需要jQuery Mobile .... :( – AntonSack 2013-03-26 13:12:52

+1

添加了關於jquery mobile的筆記 – Vladimir 2013-03-26 13:20:42

+0

Vlad,非常感謝!;-) – AntonSack 2013-03-26 13:27:13

相關問題