10

Knockoutjs の Javascript を生成する次の CoffeeScript があります。

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 の値を表示します。

ヒントはありますか？

4

1 に答える 1

20

さて、これは CoffeeScript の落とし穴の 1 つかもしれません。

class NewsItem
    content: ko.observable("")

ここでは、監視可能なオブジェクトであるプロパティ「コンテンツ」を持つ新しいクラスを作成しています。これは、次の JavaScript にコンパイルされます。

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

ご覧のとおり、プロパティ「コンテンツ」がプロトタイプに添付されています。つまり、インスタンスごとに 1 つではなく、作成されるオブザーバブルは 1 つだけです。したがって、いつでもnew NewsItem、コンストラクターはプロトタイプ内のこの単一のオブザーバブルを更新するため、すべてのインスタンスで同じ値になります。

これを解決するには、コンストラクターでオブザーバブルを作成するだけです。そうすれば、プロトタイプではなくインスタンスにアタッチされます。

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

コンパイルすると (関連部分):

this.content = ko.observable(data.get_item("content"));
于 2012-06-27T22:32:01.933 に答える