Привязка предопределенного состояния к флажкам с помощью ko.js - PullRequest
Новая
       17

Привязка предопределенного состояния к флажкам с помощью ko.js

0 голосов
/ 16 апреля 2019

Я хочу применить предопределенные состояния к флажкам с помощью knockout.js Я уже пробовал десятки вещей, но не могу заставить это работать.

Это мой код: 

function DemoItem(id, name, state) {
  var self = this;

  self.id = ko.observable(id);
  self.Name = ko.observable(name);
  self.Selected = ko.observable(state);
}

function ViewModel() {
  var self = this;

  self.availableItems = ko.observableArray([]);


  self.init = function() {
    self.availableItems.push(new DemoItem(1, 'One', true));
    self.availableItems.push(new DemoItem(2, 'Two', true));
    self.availableItems.push(new DemoItem(3, 'Three', false));
    self.availableItems.push(new DemoItem(4, 'Four', true));
    self.availableItems.push(new DemoItem(5, 'Five', true));
  };

  self.relayState = ko.computed({
    read: function() {
      ko.utils.arrayForEach(self.availableItems, function(item) {
        return item.Selected();
      });

    },
    write: function(value) {
      if (value) {
        console.log("associate item ");
      } else {
        console.log("disasociate item ");
      }
    }
  })
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
Available Items:
<div data-bind="foreach: $root.availableItems">
  <input type="checkbox" data-bind="value: id(), checked: $root.relayState" />
  <span data-bind="text: '&nbsp;' + Name()"></span>
  <br/>
</div>

Я не могу установить флажки для первоначального применения предопределенных значений.

Это ссылка на JSfiddle: http://jsfiddle.net/w392rpxf/

1 Ответ

0 голосов
/ 16 апреля 2019

Я не совсем уверен, что вы хотите сделать, но похоже, что обычные привязки нокаута должны вас охватить.

Вы можете создать observableArray, который содержит выборки.(Не) установка любого флажка автоматически добавляет или удаляет элемент в / из этого массива.

Свойство Selected вашего DemoItem используется только для заполнения его начального состояния в функции init. 

function DemoItem(id, name, state) {
  var self = this;

  self.id = ko.observable(id);
  self.Name = ko.observable(name);
  self.Selected = ko.observable(state);
}

function ViewModel() {
  var self = this;

  self.availableItems = ko.observableArray([]);
  self.selectedItems = ko.observableArray([]);

  // Log changes to the console
  self.selectedItems.subscribe(function(sel) {
    console.log("Selected are: " + sel.map(function(s) {
      return s.Name();
    }).join(", "));
  });

  self.init = function() {
    self.availableItems([
      new DemoItem(1, 'One', true),
      new DemoItem(2, 'Two', true),
      new DemoItem(3, 'Three', false),
      new DemoItem(4, 'Four', true),
      new DemoItem(5, 'Five', true)
    ]);
    
    // Set up the initial state
    self.selectedItems(
      self.availableItems()
        .filter(function(item) {
          return item.Selected();
        })
    );
  };
  
  

}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
Available Items:
<div data-bind="foreach: $root.availableItems">
  <input type="checkbox" data-bind="checked: $root.selectedItems, checkedValue: $data" />
  <span data-bind="text: '&nbsp;' + Name()"></span>
  <br/>
</div>

Редактировать: поскольку вы хотите узнать, какой из них изменился, вот еще один пример: 

function DemoItem(id, name, state, onChange) {
  var self = this;

  self.id = ko.observable(id);
  self.Name = ko.observable(name);
  self.Selected = ko.observable(state);
  
  self.Selected.subscribe(function(newValue) {
    onChange(self, newValue);
  });
}

function ViewModel() {
  var self = this;

  self.availableItems = ko.observableArray([]);
  self.selectedItems = ko.pureComputed(function() {
    return self.availableItems().filter(function(demoItem) {
      return demoItem.Selected();
    });
  });

  // Log changes to the console
  self.selectedItems.subscribe(function(sel) {
    console.log("Selected are: " + sel.map(function(s) {
      return s.Name();
    }).join(", "));
  });
  
  // Log the individual that caused the change
  self.onItemChange = function(item, newValue) {
    console.log("The item that changed was " + item.Name() + " (" + newValue + ")");
  };

  self.init = function() {
    self.availableItems([
      new DemoItem(1, 'One', true, self.onItemChange),
      new DemoItem(2, 'Two', true, self.onItemChange),
      new DemoItem(3, 'Three', false, self.onItemChange),
      new DemoItem(4, 'Four', true, self.onItemChange),
      new DemoItem(5, 'Five', true, self.onItemChange)
    ]);
  };
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
Available Items:
<div data-bind="foreach: $root.availableItems">
  <input type="checkbox" data-bind="checked: Selected" />
  <span data-bind="text: '&nbsp;' + Name()"></span>
  <br/>
</div>
...