핫 타올로 text/html 스크립트를 포함하는 방법

Question

핫 타월 SPA 템플릿에 익숙해 지려고합니다. Ryan Vanderpol의 this article을 읽은 후 인라인 편집을 구현하고 싶습니다.

이제 'text/html'유형의 스크립트 블록을 섹션 내용에 삽입하는 방법에 관해서는 상당히 분실했습니다.

내 견해에 대한 섹션에있는 내용입니다 (두 개의 스크립트 블록이 내부에 있음).

<section> 
    <h2 class="page-title" data-bind="text: title"></h2> 

    <table class="table table-striped table-bordered"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Company Name</th> 
       <th>Last Name</th> 
       <th>First Name</th> 
       <th style="width: 50px; text-align:right;" /> 
      </tr> 
     </thead> 
     <tbody data-bind=" template: { name: templateToUse, foreach: customers }"></tbody> 
    </table>   

    <script id="readTemplate" type="text/html"> 
     <tr> 
      <td data-bind='value: CustomerID' ></td> 
      <td data-bind='value: CompanyName' ></td> 
      <td data-bind='value: LastName' ></td> 
      <td data-bind='value: FirstName' ></td> 
      <td class="buttons"> 
       <a class="btn" data-bind="click: edit" href="#" title="edit"><i class="icon-edit"></i></a> 
       <a class="btn" data-bind="click: removeCustomer" href="#" title="remove"><i class="icon-remove"></i></a> 
      </td> 
     </tr> 
    </script> 

    <script id="editTemplate" type="text/html"> 
     <tr> 
      <td><input data-bind='value: CustomerID' /></td> 
      <td><input data-bind='value: CompanyName' /></td> 
      <td><input data-bind='value: LastName' /></td> 
      <td><input data-bind='value: FirstName' /></td> 
      <td class="buttons"> 
       <a class="btn btn-success" data-bind="click: save" href="#" title="save"><i class="icon-ok"></i></a> 
       <a class="btn" data-bind="click: cancel" href="#" title="cancel"><i class="icon-trash"></i></a> 
      </td> 
     </tr> 
    </script> 
</section> 

그리고 이것은 내보기 모델입니다.

define(['services/logger'], function (logger) { 
    function Customer(data) { 
     var self = this; 
     self.CustomerID = ko.observable(data.CustomerID); 
     self.CompanyName = ko.observable(data.CompanyName); 
     self.LastName = ko.observable(data.LastName); 
     self.FirstName = ko.observable(data.FirstName); 
    }; 

    function ViewModel() { 
     var self = this; 
     self.title = 'Customers'; 
     self.customers = ko.observableArray([]); 
     self.selectedItem = ko.observable(); 

     self.edit = function (item) { 
      self.selectedItem(item); 
     }; 
     self.cancel = function() { 
      self.selectedItem(null); 
     }; 
     self.removeCustomer = function (customer) { 
      // Code for deleting row 
     }  
     self.save = function() { 
      // Code for saving changes 
     };  
     self.templateToUse = function (item) { 
      return self.selectedItem() === item ? 'editTemplate' : 'readTemplate'; 
     }; 
    } 

    var vm = new ViewModel(); 
    return vm; 
}); 

Chrome을 디버깅 할 때 응용 프로그램을 실행할 때 "ID가있는 템플릿을 찾을 수 없습니다."라는 오류 메시지가 나타납니다.

핫 타월로 html 템플릿을 구현하려면 어떻게해야합니까?

도움 주셔서 감사합니다.

Answer 1

이번 주에 인라인 템플릿을 사용하여 동일한 문제가 발생했습니다. Durandal이 인라인 템플릿과 잘 작동하지 않는 것 같습니다.

다음 줄로 전화를 다음 주 파일 옆에 파일에 저장된 외부 템플릿을 사용하고 있었다 같은 우리의 솔루션 :

<!-- ko compose: { view: 'path/' + templateToUse + '.html', model: yourModel } --> 

우아한되지 않을 수 있지만, 적어도이 일하고있다.

문제가있는 경우 알려주십시오.