事件綁定在knockout.js

我有一個viewModel answerGroup對象的數組。當其中一個answerGroup對象的feedback屬性更新時，我想通過將ajax傳遞給我的ASP.Net MVC應用程序來將更新的對象保存到我的數據庫中。事件綁定在knockout.js

而不是有一個典型的保存按鈕或鏈接，我希望對象的屬性已更新時傳遞給Ajax調用。我想我可以通過綁定到textarea元素的change事件來做到這一點，但如果我這樣做，ajax函數被調用，但底層answerGroup對象的反饋屬性不會更新。

我正在使用淘汰賽1.2.1。下面是javascript代碼，我沒有包含HTML。

我是以這種錯誤的方式去做的，還是僅僅是我的knockout.js事件綁定語法不正確？

任何人都可以幫忙嗎？

<script> 
var viewModel = {} 

$(function() { 
    viewModel.scenarioId = ko.observable($("#Scenario_ScenarioID").val()); 
    viewModel.answerGroups = ko.observableArray([]); 
    viewModel.addGroup = function (answerGroup) { 

     // add item to beginning of array 
     this.answerGroups.unshift(answerGroup); 
    }; 

    ko.applyBindings(viewModel); 
}); 

function answerGroup() { 
    this.id = ko.observable(); 
    this.name = ko.observable(); 
    this.feedback = ko.observable(); 

    // the groups feedback has been updated so save 
    // these details back to the server 
    this.updateGroup = function (event) { 

     // javascript api library that is an ajax function. 
     // this works without a problem. 
     api.updateAnswerGroup({ 
     success: function (result) { 
      alert("saved!"); 
     }, 
     error: function (e) { 
      alert("error!"); 
     }, 
     data: "answerGroupId=" + this.id + "&feedback=" + this.feedback 
     }); 

     return true; 
    }; 
} 
</script> 

<script id="answerGroupsTemplate" type="text/html"> 
    <div> 
    <h4><a href='#'>${ $data.name }</h4> 
    <div> 
     <textarea cols="100" rows="2" data-bind="event: { text: feedback, change: updateGroup }"> 
     </textarea>     
    </div> 
    </div> 
</script>

來源

2011-06-05 Robini

也許我懶，但我認爲它太多的代碼。哪一部分是相關部分 – Ibu 2011-06-05 18:47:44

伊布 - 所有這些都是相關的，我沒有列入不相關的部分。 – Robini 2011-06-05 20:38:40

updateGroup函數被調用，但反饋屬性的基礎值未更新。我需要反饋屬性來更新，然後調用updateGroup函數，以便我可以將此屬性的值傳遞迴服務器。 – Robini 2011-06-05 20:41:28

在Knockout中處理此問題的典型方法是對您想要對變化作出反應的可觀察項進行手動訂閱。

所以，你會做這樣的事情：

function answerGroup() { 
    this.id = ko.observable(); 
    this.name = ko.observable(); 
    this.feedback = ko.observable(); 

    this.feedback.subscribe(function (newValue) { 
     //run your update code here 
    }, this); 
}

的第二個參數的訂閱功能控制上下文（「本」），當函數運行。

關於這樣的訂閱的好處在於，當observable以編程方式更改或基於UI中的綁定進行更改時，它將觸發。在這裏

簡要文檔：http://knockoutjs.com/documentation/observables.html#explicitly-subscribing-to-observables

我有一個職位，其中包括使用手動訂閱here太多信息。

希望這會有所幫助。

來源

2011-06-05 19:07:36

我已閱讀關於訂閱，自定義綁定等的knockout.js網站上的文檔，但您的文章將它放在我的上下文中。工作很好。現在，我添加了訂閱的一段代碼，並在函數中插入了一條警告，但它並未觸發。有任何想法嗎？ – Robini 2011-06-05 21:19:23

如果我向viewModel添加一個訂閱，但它會觸發，即viewModel.answerGroups.subscribe（function（newValue）{alert（newValue）;}，this）; – Robini 2011-06-05 21:44:27

你的綁定看起來像反饋可觀察的東西嗎？你使用價值綁定？ – 2011-06-05 22:13:08

我更喜歡訂閱觀察像RP尼邁耶如何描述，但有時你需要附加到一個事件，而不是觀察。因此您可以使用「事件」綁定。文檔不包括「改變」事件，但我已經與版本v2.0.0rc嘗試過了，它的工作原理：

<input data-bind="value: viewModel.MyProperty, event: { change: viewModel.MyPropertyChanged } />

http://knockoutjs.com/documentation/event-binding.html

來源

2012-05-25 13:22:36

事件綁定在knockout.js

回答

相關問題