2015-12-13 2 views
0

Всего Javascript нуб здесь ... Есть три файла: Нокаут, RoomModel и RoomViewModelКак ссылочный тип модели из модели просмотра?

RoomModel

function RoomModel(name) { 
    var self = this; 
    self.name = name; 
} 

RoomViewModel

function RoomViewModel(roomModel) { 
    var self = this; 
    self.Name = ko.observable(roomModel.Name).toLowerCase(); 
} 

Как RoomViewModel знает, что такое RoomModel это?

я их все вместе в представлении, но не уверен, если это право либо ...

<body> 
<script src="Models/RoomModel.js"></script> 
<script src="ViewModels/RoomViewModel.js"></script> 
<script type='text/javascript' src='/Scripts/knockout-3.4.0.js'> 
    var roomViewModel = new RoomViewModel(new RoomModel('Hello World')); 
    ko.applyBindings(roomViewModel); 
</script> 
</body> 

ответ

1

JavaScript не имеет статическую систему печати. Вместо этого, это помогает думать о том, что JS имеет Duck Typing: «Если переменная ходит как утка, а quacks, как утка, это должна быть утка».

В свете Вашего вопроса:

Как RoomViewModel знает, что такое RoomModel это?

Ответ затем будет: если входные переменные для функции RoomViewModel конструктора имеет Name свойство, оно может также быть рассмотрено в качестве действительного RoomModel.

Другими словами, Модель просмотра не нуждается в, чтобы знать, что вход является действительным RoomModel. Это зависит от вызывающего. Что касается функции конструктора View Model, это одинаково хорошо:

var roomViewModel = new RoomViewModel({ Name: 'Hello World' }); 

И в некотором смысле: это так.

Как сноска, если вам неловко эта система, вы можете изучить TypeScript.Он добавляет некоторые дополнительные функции статического ввода в JavaScript, позволяя вам блокировать тип входного аргумента для конкретного конструктора funciton («класс» в терминологии TypScript) или интерфейс (который позволяет вам сохранить некоторые из утиных наборов текста функции).

1

Я пытаюсь здесь поставить простейшую Vesion из MVVM в следующих шагов.

  1. Создать модель. В нашем случае это roomModel. Я отметил, что это наблюдаемо только для того, чтобы сделать его интерактивным.

  2. Создать экземпляр модели i.e.MediaModelObject, создавая новое ключевое слово.

  3. Создание ViewModel, где я снова использовал pureComputed только для понимания цели.

  4. Наконец создание нового объекта ViewModel и его связывания с видом через ko.applybinding

То же самое может быть достигнуто иначе, как хорошо.

//1. Data Model 
 
var roomModel = function RoomModel(name) { 
 
    var self = this; 
 
    self.firstName = ko.observable(name); 
 
} 
 

 
//2. Create Instance of Model 
 
var roomModelObject = new roomModel("O.o"); 
 

 
//3. Here's my data model 
 
var ViewModel = function() { 
 
    
 
    
 
    this.fullName = ko.pureComputed(function() { 
 
     return roomModelObject.firstName() + "- Computed"; 
 
    }, this); 
 
}; 
 

 
// 4. binding 
 
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<p>First name: <input data-bind="value: roomModelObject.firstName" /></p> 
 

 
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

+1

создание экземпляра 'roomModel' снаружи viewModel и доступ к нему внутри viewModel function err! не большой, жесткий, это прекрасно работает здесь. #instanceSharing. –

+0

@supercool Благодарим за обмен. Просто пытаюсь сделать это простым. экземпляр roomModel не даст ошибку, просто проверит фрагмент. – Dnyanesh

+0

Да, это прекрасно, он не даст никакой ошибки, но я указываю на большую картинку. все, что меня беспокоит, это OP, который может создать экземпляр вне, как указано в '(2)', что приводит к нежелательным результатам, если app'n растет больше. всегда лучше перемещать шаг 2 внутри viewModel, чтобы сделать экземпляр vm конкретным. ура –

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