html 페이지 외부 knockout viewmodel 이동하는 방법

html 파일 외부에서 knockout을 사용하는 javascript 코드를 어떻게 옮길 수 있습니까? 나는 모든 것이 처리되는 (또는되도록 많이) 별도의 파일을 만들고 싶다. 또한 템플릿 작업은 여전히 작동해야합니다. 미리 감사드립니다!html 페이지 외부 knockout viewmodel 이동하는 방법

편집 : 변경되었습니다. 내 Scripts 폴더에 require.js를 추가하고 app.js 및 viewmodel.js 파일을 만들었습니다. 그러나 이것은 여전히 효과가 없을 것입니다. 어떤 도움을 많이 주시면 감사하겠습니다 :)

EDIT2 : 거의 거기, Rumesh Eranga는 require.js를 사용하여 올바른 대답을주었습니다. 제 바인딩과 관련된 문제가 조금 있습니다. 'data-bind = "text : $ (item.name)"'은 이름을 표시하지 않고 '[object Object]'만 표시합니다.

EDIT3 : SOLVED!

이

은 HTML 파일입니다 : 여기

<head> 
<script type="text/javascript" data-main="Script/app.js" src="Scripts/require.js"></script> 
</head> 
<body> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="Scripts/jquery.tmpl.js"></script> 
<script id="shoppingItemTemplate" type="text/html"> 
    <li><span data-bind="text: item.name"></span></li> 
</script> 

<div id="ActiveShoppingList"> 
<h2>Shopping items</h2> 
<div id="ActiveList"> 
    <ul data-bind="template: {name:'shoppingItemTemplate', foreach: items, as:'item'}"></ul> 
    <button data-bind="click:addItem">Add item</button> 
</div> 
</div> 
</body>

내 스크립트/app.js : 여기

require(['knockout-3.2.0', 'viewmodel'], function(ko, viewmodel) { 
ko.applyBindings(new viewmodel); 
});

그리고 내 스크립트/viewmodel.js :

define(['knockout-3.2.0'], function(ko) { 
return function viewmodel(){ 
    this.items = ko.observableArray([new item("item1"), new item("item2")]); 
    this.addItem = function() 
     { 
      this.items.push(new item("new item")); 
     }; 
}; 

function item(name) 
{ 
    return { name: ko.observable(name) }; 
} 
});

출처

2015-02-03 Klaas Minten

ajax를 통해 외부 HTML 부분을로드 할 수 없으며 해당 HTML 파일을로드 할 때 해당 시점에 applyBindings 만 적용 할 수 있습니까? – dward

RequireJs와 비동기 모듈 정의 (AMD)를 사용하십시오.

요구 사항 및 녹아웃에 관한 유용한 정보는 here입니다.

사이트에서 인용.

HTML

<html> 
    <head> 
     <script type="text/javascript" data-main="scripts/init.js" src="scripts/require.js"></script> 
    </head> 
    <body> 
     <p>First name: <input data-bind="value: firstName" /></p> 
     <p>First name capitalized: <strong data-bind="text: firstNameCaps"></strong></p> 
    </body> 
</html>

범위/init.js로

require(['knockout-x.y.z', 'appViewModel', 'domReady!'], function(ko, appViewModel) { 
    ko.applyBindings(new appViewModel()); 
});

스크립트/appViewModel.js

// Main viewmodel class 
define(['knockout-x.y.z'], function(ko) { 
    return function appViewModel() { 
     this.firstName = ko.observable('Bert'); 
     this.firstNameCaps = ko.pureComputed(function() { 
      return this.firstName().toUpperCase(); 
     }, this); 
    }; 
});

당신이 볼 수 위의 주어진 코드에 따르면, 당신이 보기 모델 코드를 HTML과 분리하여 모듈화 할 수 있으므로 많은 도움이됩니다.

출처

2015-02-03 15:03:38

콘솔에 오류가 있습니까? 내 생각 엔

$ {$ data.name}

이 잘못되었습니다. 그것을

$ data.name

–

으로 변경해보십시오. foreach를 조금 더 쉽게 변경했습니다. "... foreach : items, as : 'item'}". 는 또한이 변경 :

의 이제

내가 항목을 추가 할 수 있습니다 그리고 난 그들까지 추가 ...하지만 난 여전히 표시되지 않습니다 참조 그들의 이름은 '[object Object]'만 볼 수 있습니다. 내 텍스트가 잘못 되었어야합니다 : $ (item.name)하지만 찾을 수 없습니다 ... 많이 시도했는데 콘솔 오류가 없습니다 ... 도와 주셔서 감사합니다! : D –

나는 '$'기호를 사용할 필요가 없다고 생각합니다. 을 사용해보십시오. 이것은 효과가있다. –

html 페이지 외부 knockout viewmodel 이동하는 방법

답변

관련 문제