Require.js
HTML
<script src="https://rawgithub.com/rniemeyer/knockout-amd-helpers/master/ext/require/require.js"></script>
<section data-bind="module: 'one'">
<input data-bind="value: name" />
</section>
<section data-bind="module: { name: 'two', data: { first: 'Ted', last: 'Smith' } }">
<input data-bind="value: first" />
<input data-bind="value: last" />
</section>
JavaScript
//typically modules will be anonymous and determined by their path
//using first argument to name the module, to ease jsFiddle demo
define("one", ["backbone", "underscore", "jquery"], function(Backbone, _, $) {
var Item = Backbone.Model.extend({
defaults:{id:1, sku:"Item1", description:"product 1", quantity:250}
});
var Items = Backbone.Collection.extend({
Model : Item,
url:'/items'
});
var item1 = new Item({id:2, sku:"Item2", description:"product 2", quantity:500});
var item2 = new Item();
var itemsCollection = new Items();
itemsCollection.on({"change:description": DescriptionChange});
itemsCollection.add(item1);
itemsCollection.add(item2);
//itemsCollection.add(item1);
itemsCollection.set({id:1, description:'hello world 1000'});
console.log(item2.get('description'));
//console.log(itemsCollection.get('c1').get('sku'));
var item = itemsCollection.get(1);
console.log(item)
return {
name: "nitin"
};
});
function DescriptionChange(model){
console.log(model.get('description'));
}
require.config({
paths: {
"backbone": "http://backbonejs.org/backbone",
"underscore": "http://underscorejs.org/underscore",
"jquery": "https://code.jquery.com/jquery-3.1.1"
}
});
require(["one"], function(ko) {
});