在KnockoutJS中爲jQuery插件創建自定義綁定

我試圖在使用ratyjQuery插件的KnockoutJS中創建一個自定義綁定來爲電影做星級評分。對於RATY插件的正常實施是這樣的......在KnockoutJS中爲jQuery插件創建自定義綁定

$('.raty').raty(); 
<div class="raty" data-rating="3"></div>

，並且會給你這樣的事情...

<div class="raty" data-rating="3" style="cursor: pointer; width: 100px;"> 
    <img src="/raty/img/star-on.png" alt="1" title="bad"> 
    <img src="/raty/img/star-on.png" alt="2" title="poor"> 
    <img src="/raty/img/star-on.png" alt="3" title="regular"> 
    <img src="/raty/img/star-off.png" alt="4" title="good"> 
    <img src="/raty/img/star-off.png" alt="5" title="gorgeous"> 
    <input type="hidden" name="score" value="3"> 
</div>

我有電影的observableArray，每個電影該集合有UserMovies.Rating。當用戶更新星級，然後更新電影observableArray中的UserMovies.Rating值時，我努力想出一種方法來讓bindingHandler處理。

這是我在實施和bindingHandler嘗試...

<div class="raty" data-bind="raty: UserMovies[0].Rating, ratyOptions: { cancel: true, half: true, size: 24 }"></div> 

ko.bindingHandlers.raty = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var options = allBindingsAccessor().ratyOptions || {}; 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     // the line below throws Syntax error: Invalid label 
     ko.bindingHandlers.attr.update(element, { 'data-rating': value }); 
     $(element).raty(options); 

     // how to fire upate function when user changes star ratings? 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     valueAccessor($(element).raty('score')); 
    } 
};

來源

2012-12-08 bflemi3

ko.bindingHandlers.raty = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var options = allBindingsAccessor().ratyOptions || {}; 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     // the line below throws Syntax error: Invalid label 
     $(element).data("rating",value); 
     $(element).raty(options); 

     $(element).delegate('click', 'img', function() { 
      valueAccessor($(element).raty('score')); 
     }); 
    } 
};

來源

2012-12-08 17:21:07

此處提供的解決方案是否正常工作？我把這個確切的代碼，但不起作用。如何綁定點擊，所以它稱爲淘汰賽功能？ – jmogera

不知道你的目標這一行做的，但你可以替換該行：

ko.bindingHandlers.attr.update(element, { 'data-rating': value });

隨着只是：

$(element).data("rating",value);

對於更新，請確認raty是否爲評級公開活動變化？如果是這樣，你可以綁定在你的init。否則，您可以嘗試綁定click事件。

來源

2012-12-08 17:19:26

元素需要有屬性'數據rating'爲了RATY正確設置初始星級評價。設置$（element）.data（'rating'，value）'不會設置html5數據屬性。 – bflemi3

@ bflemi3：你真的試過了嗎？我敢打賭，Raty使用'.data（）'得到'data-rating'，在這種情況下，它絕對可行。 –

@ bflemi3：如果沒有，您可以始終執行'$（「＃mydiv」）。attr（「data-rating」，value）' –

此代碼工作完美的我：

ko.bindingHandlers.raty = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var options = allBindingsAccessor().ratyOptions || {}; 
     var value = ko.utils.unwrapObservable(valueAccessor()); 

     $(element).raty(options); 
     $(element).raty("score", value); 

     ko.utils.registerEventHandler(element, "click", function() { 
      var observable = valueAccessor(); 
      observable($(element).raty("score")); 
     }); 
    } 
};

來源

2013-02-08 04:40:36 jmogera

在KnockoutJS中爲jQuery插件創建自定義綁定

回答

相關問題