CoffeeScript、淘汰赛和可观察的

Question

我有以下 CoffeeScript 来为 Knockoutjs 生成 Javascript

class NewsItem
    content: ko.observable("")
    title: ko.observable("")

    constructor: (data,dispForm) ->
        @content data.get_item("content")
        @title data.get_item("title")
        @id = data.get_id()

class NewsItemViewModel
    collection: ko.observableArray()

    loadAll: =>
            listEnumerator = items.getEnumerator()          
            while listEnumerator.moveNext()
                 currentItem = listEnumerator.get_current()
                 @collection.push new NewsItem currentItem, @list.get_defaultDisplayFormUrl()
            return

$ -> 
    viewModel = new NewsItemViewModel
    ko.applyBindings viewModel
    return

为了呈现 HTML，我使用此代码

<ul id="results" data-bind="template: {name: 'item_template', foreach: collection}">
</ul>
<script id="item_template" type="text/x-jquery-tmpl"> 
<li>
    <h3><a href="/" data-bind="text: title"></a></h3>
    <p>
        <textarea data-bind="value: content"></textarea>
        <input type="button" value="save" data-bind="enable: content().length > 0">
    </p>
</li>   
</script>

但是，在 HTML 中，所有项目都显示添加到集合中的最后一个 NewsItem 的值。

有什么提示吗？

Answer 1

好的，这可能是 CoffeeScript 的缺陷之一：

class NewsItem
    content: ko.observable("")

在这里，您正在创建一个新类，其属性“内容”是一个可观察对象。这会编译成以下 JavaScript：

var NewsItem = (function() {
    function NewsItem() {}
    NewsItem.prototype.content = ko.observable("");
    return NewsItem;
})();

正如您现在所见，属性“content”附加到原型。这意味着：只创建了一个可观察对象，而不是每个实例一个。因此，每当您执行new NewsItem 时，构造函数都会更新原型中的这个单个可观察对象，因此所有实例的值都相同。

要解决这个问题，只需在构造函数中创建 observable。这样，它会附加到实例，而不是原型：

class NewsItem
    constructor: (data,dispForm) ->
        @content = ko.observable data.get_item("content")

编译成（相关部分）：

this.content = ko.observable(data.get_item("content"));