У меня есть несколько моделей представлений, к которым я работаю на странице, чтобы исправить любые потенциальные конфликты, я добавил родительский узел html в текст привязки применения нокаута. Однако одна из проблем, с которыми я столкнулся, заключалась в том, что я больше не могу иметь свойство, которое находится за пределами одного из этих узлов. Я пытаюсь выяснить, есть ли способ обновить один узел HTML вне привязки модели представления, которую я также связал с этой моделью.

<html>
<head>
    <script>
        function VM1() {
            this.ViewModelProp1 = ko.observable(1);
            this.NotficationsNumber = ko.observable(1);
        }
        function VM2() {
            this.ViewModelProp2 = ko.observable(1);
        }
        ko.applyBindings(VM1, document.getElementById('vm1'));
        ko.applyBindings(VM1, document.getElementById('vm2'));
    </script>
</head>
<body>
    <!-- I want this property applied to the VM1 -->
    <h1 id="notifiy" data-bind="text: NotficationsNumber"></h1>
    <p id="vm1">
        <strong data-bind="text: ViewModelProp1"></strong>
    </p>
    <p id="vm2">
        <strong data-bind="text: ViewModelProp2"></strong>
    </p>

</body>
</html>
1
adc90 18 Дек 2015 в 20:37

3 ответа

Лучший ответ

Просто положите его в собственный контейнер.

<html>
<head>
    <script>
        function VM1() {
            this.ViewModelProp1 = ko.observable(1);
            this.NotficationsNumber = ko.observable(1);
        }
        function VM2() {
            this.ViewModelProp2 = ko.observable(1);
        }
        ko.applyBindings(VM1, document.getElementById('div1'));
        ko.applyBindings(VM1, document.getElementById('vm2'));
    </script>
</head>
<body>
<!-- I want this property applied to the VM1 -->
  <div id='div1'>
     <h1 id="notifiy" data-bind="text: NotficationsNumber"></h1>

    <p id="vm1">
        <strong data-bind="text: ViewModelProp1"></strong>
    </p>
</div>
<p id="vm2">
    <strong data-bind="text: ViewModelProp2"></strong>
</p>

</body>
</html>
1
Bindrid 18 Дек 2015 в 17:56

Вы можете применить привязку в каждом узле в DOM, но вы хотите изменить другую viewModel, связанную в DOM, верно? Таким образом, вы можете использовать ko.dataFor(element), чтобы связать модель представления в элементе, см. Фрагмент: посмотрите фрагмент:

Примечание: это один из подходов к решению этой проблемы.

function VM1() {
  this.ViewModelProp1 = ko.observable("VM 1");
  this.NotficationsNumber = ko.observable("VM 1");
}
function VM2() {
  this.ViewModelProp2 = ko.observable("vm2");
}

function updater(){
   this.textUpdate = ko.observable("Update");
   this.textUpdate.subscribe(function(nvalue){
       var vm1 = ko.dataFor( document.getElementById('div1'));
       vm1["ViewModelProp1"](nvalue);
   },this);  
};

ko.applyBindings(new updater(), document.getElementById('updater'));
ko.applyBindings(new VM1(), document.getElementById('div1'));
ko.applyBindings(new VM2(), document.getElementById('vm2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<html>
<head>
    <script>
       
    </script>
</head>
<body>
  
  <div id="updater">
    <input type="text" data-bind="textInput: textUpdate"/>
  </div>
  
<!-- I want this property applied to the VM1 -->
  <div id='div1'>
     <h1 id="notifiy" data-bind="text: NotficationsNumber"></h1>

    <p id="vm1">
        <strong data-bind="text: ViewModelProp1"></strong>
    </p>
</div>
<p id="vm2">
    <strong data-bind="text: ViewModelProp2"></strong>
</p>

</body>
</html>
1
Joel R Michaliszen 18 Дек 2015 в 18:19

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

ko.applyBindings(VM1, document.getElementById('notify'));

Кстати, у вас есть «уведомить» в вашем HTML :)

1
DonovanM 18 Дек 2015 в 18:12