Javascript 敲除viewmodel函数仅影响最后一个实例

我试图实现的是实例化多个viewmodels（数字是可变的），但单击时的函数绑定只会影响最后一个实例，无论我从何处单击

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>

新增



新增



新增



新增

无论我点击哪个按钮，只有最后一个部分被修改。理想？建议？

您有一个构造函数，您引用该构造函数时没有使用

new

关键字，因此总是引用函数定义。请尝试以下方法：

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

下面是一个完整的演示：

功能照片（名称）{
var self=这个；
self.name=名称；
}
函数名：ViewModel（）{
var self=这个；
self.photos=ko.array([
{name:'smth'}，
{name:'smth-else'}]）；
self.addPhoto=函数（）{
self.photos.push（新照片（“任何东西”）；
}
}
函数bindSectionPhotos（元素、索引、列表）{
ko.applyBindings（新的SectionPhotosViewModel（），元素）；
}
_.each（document.queryselectoral（'fieldset.room'）、bindSectionPhotos）

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

新增



新增



新增