2
Knockback.js로 새로운 것을 설정하려고합니다. 지금은 녹아웃/녹업 통합과 관련된 문제가 있습니다. 문제는 Objectives 컬렉션에 새 모델을 추가하는 이벤트 핸들러를 성공적으로 작성했지만 UI는 첫 번째 추가 및 등록 만합니다. 그것은 새로운 목표를 목록에 성공적으로 추가합니다. 그러나 첫 번째 목표 만 추가하면 컬렉션이 새 모델을 목록에 성공적으로 추가하지만 UI에는 나타나지 않습니다. Knockback.js 백본 컬렉션은 UI에 첫 번째 요소 만 추가합니다.
<a class="btn" id="click">Click me!</a>
<div id="objectives" data-bind="foreach: objectives">
<h3 data-bind="text: name"></h3>
</div>
그리고이 스크립트 :
// Knockback script MUST be located at bottom of the page
$(document).ready(new function() {
// instantiate the router and start listening for URL changes
var page_router = new PageRouter();
Backbone.history.start();
// Get JSON value
var objectives;
$.getJSON('json.php', {table: 'objectives'}).done(function(data) {
objectives = new ObjectiveCollection(data);
var view_model = {
objectives: kb.collectionObservable(objectives, {view_model: kb.ViewModel})
};
ko.applyBindings(view_model, $('#objectives').get(0));
});
$('#click').click(function() {
var objective_model = new Objective({category: 3, name: Math.random(), descriptor: 'What up'});
objectives.add(objective_model);
console.log(objectives);
});
});
유일한 사용자 정의 모델로 여기 볼 수 있습니다 :
/**
* Objectives model
*/
var Objective = Backbone.Model.extend({
// Defaults
defaults: {
id: null,
category: null,
weight: null,
name: null,
descriptor: null
},
// Url to pass to
url : function() {
// Important! It's got to know where to send its REST calls.
// In this case, POST to '/donuts' and PUT to '/donuts/:id'
return this.id ? '/objectives/' + this.id : '/objectives';
}
});
/**
* Basic objectives collection
*/
var ObjectiveCollection = Backbone.Collection.extend({
model: Objective,
initialize: function(models,options) {}
});