нокаут с боковой страницей, из-за которой вы не можете применять привязки несколько раз к одному и тому же элементу

Я создаю SPA, используя KnockoutJs. Проблема, с которой я столкнулся, заключается в том, что у меня есть страница боковой панели с несколькими якорными ссылками, которые будут загружать разные страницы в соответствии с приведенным ниже фрагментом кода.

 $('div#list a').click(function(){
    var page = $(this).attr('href');
    if (page == "new") {
        $('#container').load('application/application.jsp', function(data){
            //return false;
        });
        return false;
    } else if (page == "dashboard") {
        $('#container').load('dashboard/dashboard.jsp', function(data){
            //return false;
        });
        return false;
    }
 });

Для каждой страницы я загружаю соответствующие html и js. Например, если страница является новой в приведенном выше примере, html выглядит следующим образом.

<form>......fields are there</form><script src="application/application.js"></script>

Мой файл Js выглядит следующим образом:

var ApplicationForm = function () {
/* add members here */
/* the model */
var app = {
    nid: ko.observable(),
    lastName: "",
    firstName: "",
    address: "",
};

var addEmployment = function() {
};

var removeEmployment = function(params) {
};

var init = function () {
    /* add code to initialise this module */
    ko.applyBindings(ApplicationForm);
};

/* form submission */
var submit = function () {
    console.log(ko.toJSON(app ));
};

/**
 * subscribe to checkbox isdead and if false, clear the values
 */
app.isDead.subscribe(function(newValue) {
    //when false, clear all values
     if (!newValue) {
          //
     }
});

/* execute the init function when the DOM is ready */
$(init);

return {
    /* add members that will be exposed publicly */
    submit: submit,
    application: app,
    add: addEmployment,
    remove: removeEmployment
};

}();

Некоторые детали опущены. Проблема заключается в том, что каждый раз, когда я нажимаю на страницу с боковой ссылкой, она также загружает соответствующую страницу и JS и выдает ошибку Вы не можете применять привязки несколько раз к одному и тому же элементу, так как я вызываю applyBindings несколько раз.

Может ли кто-нибудь посоветовать мне, как мне оформить свою страницу, чтобы я не получал эту ошибку?

Большое спасибо.


javascript single-page-application knockout.js knockout-3.0
person ashley    schedule 28.01.2020    source источник
comment
Я не могу сказать из вашего кода, где applyBindings вызывается во второй раз. Дело в том, что каждая страница вызывает его в своей функции инициализации после загрузки, поэтому второй раз, когда вы щелкаете ссылку, вы получаете сообщение об ошибке?   -  person Jason Spake    schedule 28.01.2020
comment
@JasonSpake да, точно   -  person ashley    schedule 28.01.2020

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку вы каждый раз повторно используете один и тот же элемент, вам нужно очистить предыдущие привязки перед применением новых. Это можно сделать с помощью ko.cleanNode(element);

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

$('div#list a').click(function(){
    ko.cleanNode($('#container')[0]);
    ...

Вам также может потребоваться изменить свои applyBindings, чтобы они нацеливались только на один и тот же элемент, в зависимости от того, где еще вы используете привязки за пределами этого элемента.

ko.applyBindings(ApplicationForm, $('#container')[0]);
person Jason Spake    schedule 28.01.2020
comment
@ashley как это не работает? Это может просто нуждаться в небольшой настройке - person Jason Spake; 28.01.2020
comment
@ashley Вы пытались изменить свои applyBindings, чтобы они применялись только к элементу контейнера? ko.applyBindings(ApplicationForm, $('#container')[0]); - person Jason Spake; 28.01.2020
comment
Вот это да. это просто работает. Я просто делал ko.applyBindings(ApplicationForm). Правильно ли я делаю или есть лучший способ структурировать файлы html и js? Большое спасибо - person ashley; 28.01.2020
comment
@ashley То, что вы делали раньше, применяет привязки глобально, что может быть именно тем, что вам нужно, если у вас есть другие привязки за пределами элемента контейнера. Это просто зависит от того, как работает остальная часть вашего кода. Другой подход может состоять в том, чтобы применить привязки один раз глобально и использовать наблюдаемые для замены содержимого контейнера, например, с помощью привязок шаблона, но то, что у вас есть, в порядке. - person Jason Spake; 28.01.2020