knockout haritalama eklentisini kullanarak yeni öğe nasıl eklenir

Question

Nakavt eşleme örneğini deniyorum ve neredeyse orada olduğumu düşünüyorum. ViewModel.foos'a yeni bir Foo ekleyemiyorum - burada neyi özlediğimi kimse görebilir mi?

var Foo = function (data) { 

    var self = this; 
    self.id = data.id; 
    self.Name = ko.observable(data.Name); 

} 

var dataMappingOptions = { 
    key: function(data) { 
     return data.id;   
    }, 
    create: function (options) { 

     return new Foo(options.data); 
    } 
}; 


var viewModel = { 

    foos: ko.mapping.fromJS([]), 
    loadInitialData: function() { 
     ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos); 
    }, 
    loadUpdatedData: function() { 
     ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.foos); 
    } 
}; 

viewModel.addFoo = function() { 
    viewModel.foos.push(ko.mapping.fromJS(new Foo())); 
    viewModel.loadUpdatedData(); 
} 


    <ul data-bind="template: {name: 'TopTemplate'}"></ul> 
<script type="text/html" id="TopTemplate"> 
    <li><span>Result</span> 
     <ul data-bind=" template: {name: 'FooTemplate' , foreach: foos} " style="list-style-type:circle;margin-left:15px"> 
     </ul> 
    </li> 
    <button data-bind='click: addFoo'>Add Foo</button> 
</script>  
<script type="text/html" id="FooTemplate">  
    <li><span data-bind='text: Name'></span> 

    </li> 

</script> 

Answer 1

Yeni bir Foo'yu doğrudan gözlemlenebilirArray'ınıza gönderebilirsiniz.

Aşağıda, bazı ilk verileri yükleme ve sonra istemci tarafında yeni öğeler eklemek için bir düğme ile birlikte bazı güncellenmiş veriler yükleme örneği verilmiştir. Orijinal Poster Foo sınıf üyeleri içeride gözlenebilirleri uyguluyor yana http://jsfiddle.net/rniemeyer/wRwc4/

var viewModel = { 
    foos: ko.mapping.fromJS([]), 
    loadInitialData: function() { 
     ko.mapping.fromJS(initialData, dataMappingOptions, viewModel.foos); 
    }, 
    loadUpdatedData: function() { 
     ko.mapping.fromJS(updatedData, viewModel.foos); 
    } 
}; 

viewModel.addFoo = function() { 
    viewModel.foos.push(new Foo({ id: 0, Name: "New" })); 
}; 

Answer 2

kendisine ko.mapping.fromJS uygulamak için gerek yoktur. Bununla birlikte, gözlemlenebilir bir diziye eklemeniz gereken bir 'raw' json nesnesine (eşleştirmeden) sahip olduğunuzda (yani daha önce ko.mapping.fromJS() uygulamanız gerekir), aslında gerçekleştirmeniz gerektiğini buldum. ko.mapping.fromJS örneğin (Eğer varsa)

myArray.push(ko.mapping.fromJS(myNewRawJsonItem)); 

Aksi takdirde şablon bağlamaları "TypeError xxxx bir işlev değil" şikayet edecek.