Knockoutjs vm не привязан к правильному элементу - PullRequest
Новая
       36

Knockoutjs vm не привязан к правильному элементу

0 голосов
/ 25 сентября 2018

У меня есть две модели представления 

1. vm1 (for page1.php)
2. vm2 (for page2.php)

, и они находятся в отдельных файлах js.VM1 связан следующим образом: VM1.js 

$(function() {
    //other stuff
    // see orders is defined here
    gs.vm1 = function(){
            var orders = ko.observableArray([]);
        }();
    ko.applyBindings(gs.vm1, document.getElementById('page1_id'));
);

VM2 связан с таким диалогом: VM2.JS 

$(function(){
    //other stuff
    // orders is NOT defined here
    gs.vm2 = function(){...}();
    ko.applyBindings(gs.vm2, document.getElementById('page2_id'));
});

Как вы можете видеть, в моих привязках к конкретным элементам, как уже упоминалось на сайте kojs, явно указывается: https://knockoutjs.com/documentation/observables.html

Когда я загружаю page1.php, где предполагается, что vm1 ограничен, я получаю эту ошибку:

Uncaught ReferenceError: Unable to process binding "foreach: function(){return orders }"
Message: orders is not defined

Это код шаблона в page1.php, где я использую foreach: 

<div id="page1_id">
    <div data-bind="foreach: orders">
        <input class="form-check-input" type="checkbox">
        <span data-bind="text: ...some observable..."></span>
    </div>
</div>

, как вы можете видеть, ордера определены как observableArray в vm1, но дляпочему-то ко ищет его в vm2.Я отладил код ko, и кажется, что для контекста установлено значение vm2.

мой тег head выглядит следующим образом (просто чтобы показать, как я включаю эти файлы сценариев): 

<script src="scripts/vm1.js" type="text/javascript"></script>
<script src="scripts/vm2.js" type="text/javascript"></script>

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

1 Ответ

0 голосов
/ 25 сентября 2018

Я нашел проблему и опубликую ответ, если кто-то совершит ту же ошибку, что и я.Как я уже сказал в моем вопросе, vm1 предназначен для диалога, а идентификатор для этого диалога - page1_id.У меня не было этого диалога на странице 2, и когда Ко применял привязки, он не мог найти этот идентификатор и передавал ноль 

ko.applyBindings = function (viewModelOrBindingContext, rootNode) {...}

в качестве второго аргумента.если вы посмотрите на код ko, то вот как устанавливается узел: 

rootNode = rootNode || window.document.body;

, поэтому, если вы передадите null, то тело в основном будет вашим контекстом, и поскольку заказы там не определены, отсюда и ошибка.

поэтому я думаю, что урок (по крайней мере для меня) состоит в том, чтобы убедиться, что вы явно указали в своих привязках, что они правильно определены на нужной странице.

...