Knockout viewmodel函數隻影響最後一個實例

Question

我試圖實現的是實例化多個視圖模型（數字是變量），但點擊時的函數綁定隻影響最後一個實例，無論從哪裏點擊。

JS

function Photo(name){ 
    var self = this; 
    self.name = name; 
} 

function SectionPhotosViewModel() { 
    var self = this; 

    // Editable data 
    self.photos = ko.observableArray([ 
     { 
      name: 'smth' 
     }, 
     { 
      name: 'smth else' 
     } 
    ]); 

    // Operations 
    self.addPhoto = function() { 
     self.photos.push(new Photo('anything')); 
    } 
} 

function bindSectionPhotos(element, index, list){ 
    ko.applyBindings(SectionPhotosViewModel, element); 
} 

_.each(document.querySelectorAll('fieldset.room'), bindSectionPhotos) 

HTML

<fieldset class="room"> 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
    <ul data-bind="foreach: photos"> 
     <li data-bind="text: name"></div> 
    </ul> 
</fieldset> 
<fieldset class="room"> 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
    <ul data-bind="foreach: photos"> 
     <li data-bind="text: name"></div> 
    </ul> 
</fieldset> 
<fieldset class="room"> 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
    <ul data-bind="foreach: photos"> 
     <li data-bind="text: name"></div> 
    </ul> 
</fieldset> 
<fieldset class="room"> 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
    <ul data-bind="foreach: photos"> 
     <li data-bind="text: name"></div> 
    </ul> 
</fieldset> 

而且不管按鈕我點擊，只有最後intance被修改。 Ideeas？建議？

Answer 1

您有一個的構造函數函數，您不需要new關鍵字引用，因此始終引用函數定義。試試這個：

function bindSectionPhotos(element, index, list){ 
    ko.applyBindings(new SectionPhotosViewModel(), element); 
} 

這裏是一個完整的演示：

function Photo(name) { 
 
    var self = this; 
 
    self.name = name; 
 
} 
 

 
function SectionPhotosViewModel() { 
 
    var self = this; 
 

 
    self.photos = ko.observableArray([ 
 
    { name: 'smth' }, 
 
    { name: 'smth else' }]); 
 

 
    self.addPhoto = function() { 
 
    self.photos.push(new Photo('anything')); 
 
    } 
 
} 
 

 
function bindSectionPhotos(element, index, list) { 
 
    ko.applyBindings(new SectionPhotosViewModel(), element); 
 
} 
 

 
_.each(document.querySelectorAll('fieldset.room'), bindSectionPhotos)

.btn { background: #eee; padding: 5px; cursor: pointer; display: inline-block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<fieldset class="room"> 
 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
 
    <ul data-bind="foreach: photos"> 
 
    <li data-bind="text: name"></li> 
 
    </ul> 
 
</fieldset> 
 
<fieldset class="room"> 
 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
 
    <ul data-bind="foreach: photos"> 
 
    <li data-bind="text: name"></li> 
 
    </ul> 
 
</fieldset> 
 
<fieldset class="room"> 
 
    <div data-bind="click: addPhoto;" class="btn btn-success">Add new</div> 
 
    <ul data-bind="foreach: photos"> 
 
    <li data-bind="text: name"></li> 
 
    </ul> 
 
</fieldset>