1

HotTowelSPAテンプレートに慣れようとしています。Ryan Vanderpolのこの記事を読んだ後、インライン編集を実装したいと思います。

今、私はタイプ'text/html'のスクリプトブロックをセクションの内容に挿入する方法についてかなり途方に暮れています。

これは、私のビューのセクションにあるものです（内部の2つのスクリプトブロックに注意してください）。

<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でデバッグするときに、「IDreadTemplateのテンプレートが見つかりません」というエラーが表示されます。

ホットタオルにHTMLテンプレートを実装するにはどうすればよいですか？

助けてくれてありがとう。

4

1 に答える 1

2

今週、インラインテンプレートを使用した作業で同じ問題が発生しました。Durandalはインラインテンプレートではうまく機能しないようです。

私たちの解決策は、メインファイルの横のファイルに保存されている外部テンプレートを使用し、次の行でそれらを呼び出すことでした：

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

エレガントではないかもしれませんが、少なくともそれは機能しています。

それがあなたの問題を解決するかどうか私に知らせてください:)

于 2013-03-21T02:55:33.400 に答える