javascript - Knockout.js:使用 with 绑定(bind)显示可观察的属性。

Question

我正在努力将 Rails 前端迁移到 knockout.js。我的 MasterVM 有一个 currentEvent- 用户正在处理的事件，但我似乎无法在 View 中访问它的属性。我已经尝试按照单页应用程序教程(到 c/p 代码)进行操作，但无法弄清楚我做错了什么。

在开发人员控制台中，我可以访问 EVM.currentEvent 属性，因此我知道它正在正确加载。

MasterVM.js

function MasterVM() {
   var self = this;    
   self.newItemName = ko.observable();
   self.items = ko.observableArray([]);
   self.events = ko.observableArray([]);

   self.currentEvent = ko.observable();

   self.addEvent = function(data) { self.events.push(new Event(data));};

   self.removeEvent = function(event) { self.events.remove(event) }

   self.addItem = function() {
     self.items.push(new Item({ name: self.newItemName() }));
     self.newItemName("");
   };

   self.removeItem = function(item) { self.items.destroy(item);};

   self.getEvent = function(data) {
     $.ajax("/events/", {
        data: { id: 50 },
        type: "get", contentType: "application/json",
        success: function(result) { 
            self.currentEvent = new Event(result) 
            console.log(currentEvent.name())
        }
    });
 }
 self.getEvent();
}

下面是我尝试在 View 中访问它的方式，我尝试了很多组合，而这个是直接从教程中提取的。静态 html 未加载，控制台中没有错误。

edit.html.erb

<div class="editEvent" data-bind="with: currentEvent">
    <h1>TEST</h1>
        <h1 data-bind="text: name"></h1>
        <p><span data-bind="text: name"></span></p>
        <p><span data-bind="text: zip"></span></p>
        <p><span data-bind="text: date"></span></p>
</div>

Answer 1

您需要实际调用可观察对象，而不是替换它:

self.getEvent = function(data) {
 $.ajax("/events/", {
    data: { id: 50 },
    type: "get", contentType: "application/json",
    success: function(result) { 
        self.currentEvent(new Event(result));
        console.log(currentEvent.name())
    }
});

当您简单地替换 currentEvent(而不是设置它的值)时，Knockout 无法知道它发生了变化，也无法相应地更新 View 。