0

アプリケーションで使用したい一種のジェネリック コントロールを作成しようとしています。これは標準のアコーディオンになります (私は Twitter Bootstrap を使用しました)。これは、作成されるアコーディオン セクションの数がサーバーから受け取る JSON データに依存します。各アコーディオン セクションに、サーバーから取得した JSON データで構築された通常の HTML テーブルを追加したいと考えています。すべてがクライアント側で実行され、JSON 情報を取得するための Ajax の最初の投稿を受け入れます。だから、ある種のHTMLテンプレートが必要だと思いますか??

これが私がこれまでに持っているものです。JSON データ:

 var data = {
        "d": [
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.AvailibleStock",
        "WarehouseID": 1,
        "ProductSKUID": 1,
        "ProductSKUName": "Decoder 1132",
        "WarehouseName": "SoftwareDevelopmentTest",
        "Status": "Staging",
        "QtyUnassigned": 10
    },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.AvailibleStock",
        "WarehouseID": 1,
        "ProductSKUID": 2,
        "ProductSKUName": "Decoder 1131",
        "WarehouseName": "SoftwareDevelopmentTest",
        "Status": "Staging",
        "QtyUnassigned": 5
    }
]
    };

    var data2 = {
        "d": [
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 2,
        "LotID": 2,
        "LotName": "TestLot2",
        "AreaID": 8,
        "AreaName": "TestArea3L2",
        "BinID": 18,
        "BinName": "Area8Bin2"
    },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 2,
        "LotID": 3,
        "LotName": "TestLot3",
        "AreaID": 11,
        "AreaName": "TestArea2L3",
        "BinID": 20,
        "BinName": "Area10Bin1"
    },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 2,
        "LotID": 4,
        "LotName": "TestLot4",
        "AreaID": 15,
        "AreaName": "TestArea2L4",
        "BinID": 24,
        "BinName": "Area14Bin1"
    },
     {
         "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
         "WarehouseID": 1,
         "ProductSKUID": 1,
         "LotID": 2,
         "LotName": "TestLot2",
         "AreaID": 8,
         "AreaName": "TestArea3L2",
         "BinID": 18,
         "BinName": "Area8Bin2"
     },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 1,
        "LotID": 3,
        "LotName": "TestLot3",
        "AreaID": 11,
        "AreaName": "TestArea2L3",
        "BinID": 20,
        "BinName": "Area10Bin1"
    },
    {
        "__type": "Warehouse.Tracntrace.Members_Only.DLL.StockMovement.StockReturnMethod",
        "WarehouseID": 1,
        "ProductSKUID": 1,
        "LotID": 4,
        "LotName": "TestLot4",
        "AreaID": 15,
        "AreaName": "TestArea2L4",
        "BinID": 24,
        "BinName": "Area14Bin1"
    }
]
    };

サーバーからこれを取得するために 2 つの AJAX 呼び出しを使用しました。ご覧のとおり、2 つのデータ セットの間には類似性があります (どちらも ProductSKUID と WarehouseID で相互に関連付けることができます)。

次に、KnockoutJS と標準 JQuery を使用して、innerHTML メソッドを使用してアコーディオンを作成し、アコーディオン内に HTML テーブルを作成して、アコーディオンの機能を構築します。

 var ProductViewmodel;
    //debugger; 

    //Binds ViewModel
    function bindProductModel(Products) {
        var self = this;
        self.items = ko.mapping.fromJS([]);
        ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
        console.log(ProductViewmodel());

    }

    //Binds First DataSet
    function bindModel(vm, data) {
        var self = this;
        vm.Locations = ko.mapping.fromJS(data.d);
        console.log(ProductViewmodel());
    }

    //Create Table In Accordion PANE based on Data
    //This Creates The Table in Each Accordion Pane
    function InjectBody() {
        var bodyContainer = document.getElementById('injectbody');
        var body = bodyContainer.innerHTML;
        body = body + '<table class="table table-striped"><thead><tr><th>#</th><th>Lot</th><th>Area</th><th>Bin</th><th>Qty To Assign</th></tr></thead><tbody data-bind="foreach: Locations"><tr><td id="Assign"><input type="checkbox" /></td><td id="Lot" data-bind="text: LotName"></td><td id="Area" data-bind="text: AreaName"></td><td id="Bin" data-bind="text: BinName"></td><td id="QtyToAssign"><input type="text" /></td></tr></tbody></table>';
        bodyContainer.innerHTML = body;
    }

    //Create Accordian Panes
    //This Creates The Hyperlink Based On JSON DATA
    function BuildLinkFromJSON() {
        var link;
        link = '<a data-bind="foreach: items" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse"><span data-bind="text: ProductSKUName"></span></a>';
        //This Creates The Table in Each Accordion Pane
        InjectBody();
        return link;
    }

    //Create Accordian Header
    //This Creates Each Header in the Accordian
    function BuildAccordian() {
        //This Creates The Hyperlink Based On JSON DATA
        var link = BuildLinkFromJSON();
        var eventsContainer = document.getElementById('accordion');
        var events = eventsContainer.innerHTML;
        events = events + '<div class="accordion-group"><div class="accordion-heading">' + link + '</div><div id="collapseOne" class="accordion-body collapse in"><div class="accordion-inner"><div id="injectbody"></div></div></div>';
        eventsContainer.innerHTML = events;
    }


    //Starting Function
    //This Creates the ProductViewModel Binding of both DataSets
    $(document).ready(function () {
        bindProductModel(data);
        bindModel(ProductViewmodel()[0], data2);
        ko.applyBindings(ProductViewmodel);

    })

完全に失敗したようで、修正する方法がわかりません...このフィドルを作成しましたが、出力すらありません。どんな助けでも大歓迎です!!

4

1 に答える 1

0

KOのカスタム「コントロール」を実行するときは、文字列テンプレートソースを使用して、「コントロール」のスクリプト内にHTMLを記述します。進行中のKOComboboxで、その方法を確認できます。

https://github.com/AndersMalmgren/Knockout.Combobox/blob/master/src/knockout.combobox.js

テンプレート部分をチェックしてください

//string template source engine
var stringTemplateSource = function (template) {
    this.template = template;
};

stringTemplateSource.prototype.text = function () {
    return this.template;
};

var stringTemplateEngine = new ko.nativeTemplateEngine();
stringTemplateEngine.makeTemplateSource = function (template) {
    return new stringTemplateSource(template);
};

var template= '<div data-bind="with: model">\
   <span data-bind="text: data"></span>\
</div>';

そして、カスタムバインディングからテンプレートを適用するには

ko.bindingHandlers.myBinding = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var model = new MyBindingViewModel(valueAccessor());
        ko.renderTemplate(template, bindingContext.createChildContext(model), { templateEngine: stringTemplateEngine }, element, "replaceChildren");

        return { controlsDescendantBindings: true };
    }
};

ビューから通常のバインディングのようにカスタムバインディングを使用できるようになりました

<div data-bind="myBinding: model"></div>
于 2012-12-20T13:41:27.760 に答える