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) {} 
}); 

답변

2

밝혀, 문제는 여기에 위치했다 :

var Objective = Backbone.Model.extend({ 
    // Defaults 
    defaults: { 
    id: null, 
    category: null, 
    weight: null, 
    name: null, 
    descriptor: null 
} 

ID가있는 모델을 계속 생성했습니다. f null이며 프로그램은 고유 ID가있는 오브젝트 만 표시합니다. ID의 기본값은 null이므로 정의 된 ID가없는 두 개의 오브젝트가 동일한 것으로 간주합니다. id : null을 지움으로써; 이 문제는 문제가되지 않았습니다.