CoffeeScript, Knockout & thể quan sát được

Question

Tôi đã sau CoffeeScript để tạo Javascript cho Knockoutjs

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 

Để render HTML tôi sử dụng mã này

<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> 

Tuy nhiên, trong HTML tất cả các mục hiển thị các giá trị của NewsItem cuối cùng được thêm vào bộ sưu tập.

Bất kỳ gợi ý?

Answer 1

Được rồi, đây có thể là một trong những cạm bẫy mà CoffeeScript có:

class NewsItem 
    content: ko.observable("") 

Ở đây, bạn đang tạo một lớp mới với một tài sản "nội dung" có nghĩa là một đối tượng quan sát được. Công cụ này biên dịch sang mã JavaScript sau:

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

Như bạn có thể thấy bây giờ, nội dung "nội dung" được đính kèm với nguyên mẫu. Điều đó có nghĩa là: chỉ có một cái có thể quan sát được tạo ra, chứ không chỉ một cái có thể quan sát được. Vì vậy, bất cứ khi nào bạn làm new NewsItem, hàm khởi tạo cập nhật cái này có thể quan sát được trong nguyên mẫu, do đó có cùng giá trị cho tất cả các trường hợp.

Để giải quyết vấn đề này, chỉ cần tạo quan sát được trong hàm tạo. Bằng cách đó, nó được gắn liền với các trường hợp, không phải là nguyên mẫu:

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

biên dịch vào (phần có liên quan):

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