Как получить эту простую одностороннюю привязку с нокаутом для работы?

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

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

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

TypeError: c is null

Вот мой код:

1.html

<html> 
    <head> 
     <meta charset="utf-8"/> 
     <script type='text/javascript' src='knockout-3.4.0.js'></script> 
     <script type='text/javascript' src='1.js'></script> 
    </head> 

    <form id = "frm" name = "frm"> 
     <fieldset> 
      <legend>Your friend's basic information</legend> 

      <div> 
       <label for = "FirstName">First Name</label> 
       <input type = "text" name = "FirstName" id = "txtFirstName" data-bind = "value: friend.firstName" /> 
      </div> 

      <div> 
       <label for = "LastName">Last Name</label> 
       <input type = "text" name = "LastName" id = "txtLastName" data-bind = "value: friend.lastName" /> 
      </div> 
     </fieldset> 

    </form> 
</html>

1.js

var model = 
{ 
    friend : 
    { 
     firstName : 'Sathyaish', 
     lastName : 'Chakravarthy' 
    } 
}; 

ko.applyBindings(model);

Похоже, что нокаут не может связать вложенное свойство. Поскольку свойство, которое я связываю, не является непосредственно членом объекта model, но вместо него вложено внутри model.friend, оно не может связывать его.

Несомненно, не может быть, что я не могу иметь иерархическую модель и что я могу связывать только, если свойства являются членами верхнего уровня объекта model?

Я, скорее всего, что-то не так с синтаксисом.

источник

2016-10-29 Water Cooler v2

Если вы не передадите rootElement, чтобы применить привязки, он будет использовать window.document.body. Однако, если скрипт загружен в раздел head, то body в данный момент недоступен. Так что вам нужно, чтобы переместить 1.js нагрузку внутри тела, как это:

<html> 
    <head> 
     <meta charset="utf-8"/> 
     <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js'></script> 

    </head> 

    <body> 
    <form id = "frm" name = "frm"> 
     <fieldset> 
      <legend>Your friend's basic information</legend> 

      <div> 
       <label for = "FirstName">First Name</label> 
       <input type = "text" name = "FirstName" id = "txtFirstName" data-bind = "value: friend.firstName" /> 
      </div> 

      <div> 
       <label for = "LastName">Last Name</label> 
       <input type = "text" name = "LastName" id = "txtLastName" data-bind = "value: friend.lastName" /> 
      </div> 
     </fieldset> 

    </form> 
    <script type='text/javascript' src='1.js'></script> 
    </body> 
</html>

источник

2016-10-29 13:47:53

Большое спасибо. За 4 минуты до зеленого чек. :-) –

@ WaterCoolerv2, добро пожаловать. Должен быть в состоянии принять его сейчас) –

Вам нужно будет использовать библиотеку отображения, чтобы сделать это. Когда вы используете вложенные свойства, такие как класс, вам нужно использовать сопоставление. проверить это: Plugin Knockout Mapping

Ваш код Виль некоторые так:

var viewModel = function() { 
var _vm = null, 

init = function() { 

    _vm = { 
     friend : ko.mapping.fromJS({ 
     firstName : 'Sathyaish', 
     lastName : 'Chakravarthy' 
     }), 
     change: function(){ 
     _vm.friend.firstName('first name changed'); 
     } 
    }; 

    ko.applyBindings(_vm, $('#frm').get(0)); 
} 

return { 
    init: init 
}

}();

У меня такой сценарий все время. Я положил JSFIDDLE check it out

источник

2016-10-29 13:55:34

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

Думаю, у вас может быть точка. Я попал в блокпост в этом вопросе (http://stackoverflow.com/q/40325541/303685), который может потребовать сопоставления, но я не уверен. –

Привет! Попробуйте использовать плагин отображения, как я сказал, и способ, которым вы пытаетесь изменить свойства. Он должен быть в parenteses: property ("value") –

Как получить эту простую одностороннюю привязку с нокаутом для работы?

ответ

Смежные вопросы