3

私が想像するものは本当にばかげた問題であると苦労しています。「foreach」を使用して Knockout.JS のコレクションを反復処理しており、コレクション内の変数を使用して各項目のリンクを作成する必要があります。

問題は、ビュー モデルの変数を使用してその場で URL が生成され、これらを Knockout コレクションの変数と組み合わせる必要があることです。

Knockout ループを含むブロックを次に示します。

    <div data-bind="foreach: pagedList" class="span8" style="border-bottom: 1px solid #0094ff;">
        <div style="cursor: pointer;">                 

            <p data-bind="text: hotelId"></p>
            <p data-bind="text: name"></p>
            <p data-bind="text: hotelRating"></p>
            <p data-bind="text: propertyCategory"></p>

        </div>
    </div>

理想的には、'onclick="window.location=' メソッドを介して親 div へのリンクを追加したいのですが、Action.Link を使用して、文字列連結によって Knockout 変数を追加しようとしました。

<div style="cursor: pointer;" onclick="window.location="@Url.Action( "Index", "Hotel",                new { regionId = Model.region.regionId, regionName =     HttpUtility.UrlPathEncode(Model.region.regionNameLong.ToString().Replace(",","")).Replace("%20","-"), hotelId = " + hotelID() + ", hotelName =   HttpUtility.UrlPathEncode(Convert.ToString(" + name() +     ").Replace(",","")).Replace("%20","-") })"> </div>

しかし、これにより「オブジェクトがインスタンス化されていないというエラー」が発生します。次に、「data-bind="attr:」メソッドを使用して、最初に Knockout を使用してみました。

<a href="someurl" data-bind="attr: { href: '/Region/' + '@Model.region.regionId    ' + '/' + '@HttpUtility.UrlPathEncode(Model.region.regionNameLong.ToString().Replace(",","")).Replace("%20","-")    ' + '/' + hotelID() + '/' + '@HttpUtility.UrlPathEncode(Convert.ToString(" + name() + ").Replace(",","")).Replace("%20","-")' }, text: hotelId()"></a>

ここでもサイコロはありません。

これがクライアント側とサーバー側のパラダイムを混在させていることは知っていますが、Knockout を捨てずに別の方法を考えることはできません。

誰もこれについて経験がありますか？

4

1 に答える 1

1

将来的には、問題の JSFiddle を作成すると非常に役立ちます。

あなたの2番目のアプローチはより近いです。

カスタム Knockout バインディングとテンプレートを使用する例を次に示します。

http://jsfiddle.net/szWBv/5/

JavaScript をクライアントに送信する前に、razor を使用してサーバー側で値を設定できます。

HTML は次のとおりです。

<div data-bind="template: { foreach: myItems,  name: 'template-item' }" class="span8" style="border-bottom: 1px solid #0094ff;"></div> 

<!-- basic template -->
<script type="text/html" id="template-item">
            <p data-bind="text: hotelId"></p>
            <p data-bind="text: hotelName"></p>
            <p data-bind="text: hotelRating"></p>
            <p data-bind="text: propertyCategory"></p>
            <a data-bind="KoYourCustomBind: $data" href="#">link</a>
</script>

JavaScript は次のとおりです。

// sample viewModel
var testViewModel = function(){
    var self = this;   
    // another viewmodel property you want to use in url creation. 
    this.urlPart = "/ALLUSE/";
    // array or list is called myItems
    var iData = [new myItem("999", "Sheraton", "CAT7"), new myItem("007", "Marriott", "CAT11"), new myItem("212", "Budget Inn", "CAT00")]; 
    this.myItems = ko.observableArray(iData);

}

var myItem = function(sHotelId, sName, sPropertyCategory) {
    var self = this;
    this.hotelId = sHotelId;
    this.hotelName =  sName;
    this.hotelRating = 4; //hardcoded. only 4 star hotels here :) 
    this.propertyCategory = sPropertyCategory;
};

// ko bindings
ko.bindingHandlers.KoYourCustomBind = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
    {
        var item = valueAccessor();
        var url = 'http://' + bindingContext.$parent.urlPart + item.hotelId + item.propertyCategory;
        $(element).text(item.hotelName);
        $(element).attr('href', url);
    }   
};

var vm = new testViewModel();
ko.applyBindings(vm);

フィドルの例は、jQuery と Knockout に依存しています。

于 2013-09-11T07:04:27.240 に答える