는

Question

피사체가 여기에 조금 혼란이지만, 바인딩 정의의 일부로서 템플릿에 사용자 지정 바인딩을 설정하면 내가 할 노력하고있어입니다 나의 페이지. 이것은 잘 작동하고, 사이트의 SimpleGrid 모델을 따랐습니다. 그러나 일부 필드는 날짜, 불린 등입니다. 사용자 정의 바인딩을 사용하여 날짜를 이전 플러그 인 등으로 변환하고 싶습니다. 그리드를 작성하기 전에 그리드에서 사용자 정의 바인딩을 지정하기 만하면됩니다. 이제는 "재사용 가능한"격자 바인딩을 사용하여 (격자 정의의 일부로) 바인딩 및 값 목록을 전달하여 격자의 머리글과 셀에 대한 템플릿에 할당 할 수 있기를 원합니다. HTML 페이지 뷰 모델의 다음

<div data-bind="grid: grid" /> 

:

여기

var tenantsViewModel = { 
    navigateDetails: function (tenant) { 
     document.location = '/Tenants/Details/' + tenant.TenantId; 
    }, 
    navigateDomain: function (tenant) { 
     window.open("http://" + tenant.Domain); 
    }, 
    grid: new my.grid({ 
     resource: "system/tenants", 
     columns: [ 
      { display: "Tenant", value: "Name", isLink: true }, 
      { display: "Enabled", value: "IsEnabled", isLink: false }, 
      { display: "Tenant Since", value: "CreatedOn", isLink: false }, 
      { display: "Domain", value: "Domain", isLink: true } 
     ] 
    }) 
}; 
tenantsViewModel.grid.update(); 
ko.applyBindings(tenantsViewModel); 

내 사용자 정의 그리드 바인딩 그리고 템플릿 :

// Object 
my.grid = function (config) { 
    var self = this; 
    self.data = ko.observableArray([]); 
    self.columns = config.columns; 
    var resource = config.resource; 

    my.grid.prototype.update = function() { 
     // A Wrapper for $.ajax()/JSONP 
     my.get(resource, function (data) { 
      self.data(data); 
     }); 
    }; 
}; 

// Templates 
var templateEngine = new ko.nativeTemplateEngine(); 

templateEngine.addTemplate = function (templateName, templateMarkup) { 
    document.write("<script type=\"text/html\" id='" + templateName + "'>" + templateMarkup + "<" + "/script>"); 
}; 

templateEngine.addTemplate("merlin_grid", "\ 
       <table class=\"data\">\ 
        <thead>\ 
         <tr data-bind=\"foreach: columns\">\ 
          <th data-bind=\"text: display\"></th>\ 
         </tr>\ 
        </thead>\ 
        <tbody data-bind=\"foreach: data\">\ 
         <tr data-bind=\"foreach: $parent.columns\">\ 
          <td data-bind=\"css: { link: isLink },text: typeof value == 'function' ? value($parent) : $parent[value] \"></td>\ 
         </tr>\ 
        </tbody>\ 
       </table>"); 

// Grid: Convert element into a full blown grid component 
ko.bindingHandlers.grid = { 
    init: function() { 
     return { controlsDescendantBindings: true }; 
    }, 
    update: function (element, viewModelAccessor, allBindingsAccessor) { 
     var viewModel = viewModelAccessor(), allBindings = allBindingsAccessor(); 

     while (element.firstChild) 
      ko.removeNode(element.firstChild); 

     var gridTemplateName = allBindings.gridTemplate || "merlin_grid"; 

     var gridContainer = element.appendChild(document.createElement("DIV")); 
     ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode"); 
    } 
}; 

가 거기에 여기

내 페이지의 HTML의 이 작업을 쉽게 수행 할 수 있습니까?

감사합니다.

Answer 1

이 기능을 사용할 수 없습니다. KnockoutJS 사용자 그룹에 대해서도 질문이 있습니다. 그들이 응답하면 여기에 결과를 게시 할 것입니다.