仍然反映以前值的durandal viewmodel的新實例

Question

我在嘗試使用durandal的稍微複雜的組合場景時遇到了一個奇怪的問題。

我想動態地組成表格的每個單元格的內容。作爲一個例子，我有以下文件：

welcome.html =>包含的代碼來渲染HTML表格動態

<table> 
    <thead> 
     <tr data-bind="foreach: columnNames"> 
      <th><span data-bind="text: $data"></span> 

      </th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: items"> 
     <tr data-bind="foreach: $parent.columnNames"> 
      <!-- <td data-bind="text: $parent[$data]"></td>--> 
      <td data-bind="compose: { model: $root.activeView($index), activationData: $root.activationData($parentContext.$index), cacheViews: false }"></td> 
     </tr> 
    </tbody> 
</table> 

welcome.js =>相應的視圖模型

define(['knockout'], function (ko) { 
var ctor = function() { 
    var m_items = [{ 
     'Name': 'John', 
     'Age': 25 
    }, { 
     'Name': 'Morgan', 
     'Age': 26 
    }]; 
    this.items = ko.observableArray(m_items); 
    this.columnNames = ko.computed(function() { 
     if (m_items.length === 0) 
      return []; 
     var props = []; 
     var obj = m_items[0]; 
     for (var name in obj) 
      props.push(name); 
     return props; 
    }); 

    this.activeView = function (index) { 
     if (index() == 0) 
      return "viewmodels/cell-1"; 
     else 
      return "viewmodels/cell-2"; 
    }; 

    this.activationData = function (rowIndex) { 
     return m_items[rowIndex()]; 
    } 

}; 

return ctor; 
}); 

cell-1.html =>視圖以顯示第一列

<span data-bind="text : Name"></span> 

cell-1.js =>對應視圖cell-1的模型

define(['knockout'], function (ko) { 
var model = null; 
var name = ko.observable(); 
var ctr = function() { 
    this.Name = name; 
    this.activate = function (modelObject) { 
     model = modelObject; 
     name(model.Name); 
    }; 
}; 
return ctr; 
}); 

而且類似地是cell-2的視圖和視圖模型。

我面臨的問題是，即使構圖工作正常，激活函數被調用兩次，對於cell-1.js（每行一次），可觀察值name的值將包含以前的值。當它嘗試將其設置爲「Morgan」時，該值將是「John」）。這很奇怪，因爲cell-1.js返回一個構造函數，因此durandal應該創建視圖模型的另一個實例。總而言之，這會導致兩行包含相同的數據。

我敢肯定，有一些小事我必須調整才能實現，但我所有的努力都是徒勞的。

任何幫助將不勝感激。

Answer 1

問題是，您已在cell-1.js的模塊級別聲明瞭model和name變量。

所以，即使你返回一個被調用兩次的構造函數，模塊本身也只會加載一次，所以你的視圖模型共享相同的狀態。

爲了解決它，你只需要移動你的變量ctr內：

define(['knockout'], function (ko) { 

var ctr = function() { 
    var model = null; 
    var name = ko.observable(); 

    this.Name = name; 
    this.activate = function (modelObject) { 
     model = modelObject; 
     name(model.Name); 
    }; 
}; 
return ctr; 
});