Вопрос:

knockout.js remove не работает с вложенной моделью представления и моделью представления в основной модели представления

javascript asp.net-mvc mvvm knockout.js

34 просмотра

1 ответ

5182 Репутация автора

 <div data-bind="with: SimpleListModel">
<form data-bind="submit: addItem" >
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
</div>


<div data-bind="with: SimpleListModel2">  
<div data-bind="foreach: baselist">
  <div>
    <span data-bind="text: basename"></span>
    <div data-bind="foreach: subItems">
      <span data-bind="text: subitemname"></span>
      <a href="#" data-bind="click: $parent.removecard">Del</a>
    </div>     
  </div>
  <button data-bind="click:$parent.addChild">Add</button>
</div>
</div>

это модель

    var SimpleListModel = function(items) {
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function() {
        if (this.itemToAdd() != "") {
            this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
            this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
        }
    }.bind(this);  // Ensure that "this" is always this view model
};

var initialData = [
{ basename: "Danny", subItems: [
    { subitemname: "Mobile"},
    { subitemname: "Home"}]
},
{ basename: "Sensei", subItems: [
    { subitemname: "Mobile"},
    { subitemname: "Home"}]
}];

var SimpleListModel2 = function(baselist) {
  var self= this;
  self.baselist= ko.observableArray(baselist);
  self.addChild = function(list) {
    alert(list.basename);
  }.bind(this);

  self.removecard = function (data) {
   //tried
       data.baselist.subItems.remove(data);
       data.subItems.remove(data);
       $.each(self.baselist(), function() { this.subItems.remove(data) })
  };
};

var masterVM = (function () {
         var self = this;      
         self.SimpleListModel= new SimpleListModel(["Alpha", "Beta", "Gamma"]);
         self.SimpleListModel2= new SimpleListModel2(initialData);

})();

ko.applyBindings(masterVM);

Это небольшой фрагмент кода, который я создал из своего проекта. Может кто-нибудь заставить работать карту удаления? последние два приращения моих вопросов одного типа. но этот вопрос самый высокий, которого я достигаю.

removecard не работает сейчас в этом сценарии, по крайней мере, для меня.

Автор: maztt Источник Размещён: 06.04.2017 02:41

Ответы (1)


1 плюс

1219 Репутация автора

Решение

Используйте, $parents[index]чтобы добраться до конкретного родителя. http://knockoutjs.com/documentation/binding-context.html .

$parents[0] -> родитель

$parents[1] -> прародитель

так далее

var initialData = [
  { basename: "Danny", subItems: [
  { subitemname: "Mobile"},
  { subitemname: "Home"}]
},
{ basename: "Sensei", subItems: [
  { subitemname: "Mobile"},
  { subitemname: "Home"}]
}];

var SimpleListModel2 = function(baselist) {
  var self= this;
  self.baselist= ko.observableArray(baselist);
  self.addChild = function(list) {
    alert(list.basename);
  }.bind(this);

  self.removecard = function (data) {
    //tried
    console.log(data);
  };
};

var masterVM = (function () {
     var self = this;      
     self.SimpleListModel2= new SimpleListModel2(initialData);
})();

ko.applyBindings(masterVM);  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="with: SimpleListModel2">  
  <div data-bind="foreach: baselist">
    <div>
      <span data-bind="text: basename"></span>
      <div data-bind="foreach: subItems">
        <span data-bind="text: subitemname"></span>
        <a href="#" data-bind="click: $parents[1].removecard">Del</a>
      </div>     
    </div>
    <button data-bind="click:$parent.addChild">Add</button>
  </div>
</div>

Автор: muhihsan Размещён: 06.04.2017 02:57
Вопросы из категории :
32x32