1

私のRazorビューには、表示されていない3つのプロパティを持つテーブルがあります。Id_Loaction、Id_Level&Id_Section

このテーブルの上には、適切な ID を値として持つ、すべての場所、レベル、およびセクションのチェックボックスの 3 つのリストがあります。

@foreach (var section in Model.Sections)
{
    <li>
      <input type="checkbox" data-bind="checked: data" value="@Html.Encode(section.Value)"/>@Html.Encode(section.Text)
    </li>
}

注:section.Valueは、表の行でも使用される要素の ID です。

テーブル自体はかなり単純に構築されています。

@foreach (var item in Model.Offers) 
{
    <tr data-bind="visible: data.IsChecked == true ">
    <td>
        @Html.DisplayFor(modelItem => item.Description)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Location)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.Text)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.Value)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Section.IsChecked)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Level)
    </td>
    <td>
        @Html.ActionLink("Details", "Details", new { id=item.ID })
    </td>
</tr>
}


<script type="text/javascript">
    var data = @Html.Raw(Json.Encode(Model.Sections));

    function FormViewModel(data) {
        this.data = ko.observableArray(data);
    }

    window.viewModel = new FormViewModel(data);

    console.log(viewModel.data());    
    ko.applyBindings(viewModel);
</script>

/編集: コードを実際の混乱に合わせて更新しました。Model.Sections は ViewModel であり、Model.Offers.Section に使用される ViewModel と同じです。どちらにも、Value、Text、および IsChecked プロパティが含まれています。

両方を比較して、セクションがチェックされているテーブル行のみを表示するにはどうすればよいですか?

ゆっくりしてください。敬具

4

6 に答える 6

3

これは、サーブがやろうとしていると私が想定していることの縮小版でノックアウトを使用しようとする試みです。これは、オブジェクトのリストに対する単純なフィルターの例であり、簡単に拡張して、より多くのフィルターやより複雑なモデルを含めることができます。

フィドル http://jsfiddle.net/zTRq2/3/

単純なフィルター ViewModel:

function filterViewModel(data) {
    var self = this;
    self.text = ko.observable(data.text);
    self.checked = ko.observable(data.checked);
}

縮小されたオファー ビュー モデル:

function offerViewModel(offer) {
    var self = this;
    self.description = offer.description;
    self.location = offer.location;
}

メイン ビュー モデル:

function FormViewModel(data) {
    var self = this;
    // map data from server to locations filter
    self.locations = ko.observableArray(ko.utils.arrayMap(data.locations, function (filter) {
        return new filterViewModel(filter);
    }));

    self.offersView = ko.computed(function () {
        // get list of offers that were passed in, we'll manipulate filteredOffers from now on
        var filteredOffers = data.offers;

        // get all selected locations view models
        var selectedFilterLocations = ko.utils.arrayFilter(self.locations(), function (location) {
            return location.checked();
        });

        // run through util function to filter only offers that match any selected location
        filteredOffers = ko.utils.arrayFilter(filteredOffers, function (offer) {
            var matchesLocation = false;
            ko.utils.arrayForEach(selectedFilterLocations, function (location) {
                if (offer.location === location.text()) matchesLocation = true;
            });
            return matchesLocation;
        });

        return filteredOffers;
    });
};

HTML:

<!-- list of location checkboxes -->
<ul class="unstyled inline" data-bind="foreach: locations">
    <li>
        <input type="checkbox" data-bind="checked: checked" /> <span data-bind="text: text"></span>

    </li>
</ul>

<!-- table which is bound to the offersView computed observable -->
<!-- offersView is recalculated everytime a selection changes from the filter list -->
<table class="table-bordered">
    <tbody data-bind="foreach: offersView">
        <tr>
            <td data-bind="text: description"></td>
            <td data-bind="text: location"></td>
        </tr>
    </tbody>
</table>
于 2013-07-07T03:06:36.370 に答える
2

必要がない限り、jQuery の each は使用しません。

ノックアウトは、ビューに foreach メソッドを提供します。それと if ステートメントまたは可視バインディングを使用します。

<ul data-bind="foreach: entity">
    <!-- ko if:checked() -->
         <!-- display your Li here -->
         <li></li>
    <!-- /ko -->
  </ul>

または、ko if containerless ステートメントを削除して、代わりに次を使用することもできます。

 <li data-bind="visible: checked()"></li>

ただし、これらのテストは両方とも、checked が true に等しいかどうかを示していることを思い出してください。値が文字列の場合、文字列に対してテストする必要があります。

編集

テストするIDまたは値がある場合は、次のように実行できます-

<li data-bind="visible: section.checked() === true"></li>

または他の論理テスト

于 2013-06-28T14:26:59.820 に答える
2

チェックされている場合は tr のスタイルを none に設定する必要があります (チェックされているもののみを表示する場合は、非 'none' 値に設定します)。

var viewModel= function(){
var self=this;
self.tableData=ko.observableArray(),
init=function(){
    for(var i=0;i<5;i++){
        //Put all your data here
        var data={
            selected:ko.observable(false),
            id:ko.observable('loc'+i),
            desc:'desc'+i
            };
        self.tableData.push(data);
    }
};
init();
}
ko.applyBindings(new viewModel());

HTMLは次のようになります

    <div data-bind="foreach:tableData">
    <input type="checkbox" data-bind="checked:selected"/><span data-bind="text:id"></span>
    </div>

   <table>
    <thead>
        <th>Location</th>
        <th>Desc</th>
    </thead>
    <tbody data-bind="foreach:tableData">
        <tr data-bind="{style:{display:selected()?'none':''}}">
            <td data-bind="text:id"></td>
            <td data-bind="text:desc"></td>
        </tr>
    </tbody>
   </table>

ここにjsfiddleがあります： http://jsfiddle.net/Dhana/keT7B/

于 2013-07-08T21:15:30.597 に答える
1

「行」とは、あなたが李を意味していると思います。jQuery ライブラリのeach()一部であるメソッドは、配列を反復処理するために使用されます。この場合、jQuery セレクターによって返される一致した要素の配列です$('input[type="checkbox"]')。

$('input[type="checkbox"]').each(function(){
    if(this.checked)  
        $(this).closest('li').hide()
})

http://jsfiddle.net/sailorob/4bC2P/

http://api.jquery.com/jQuery.each/

于 2013-06-28T14:20:20.013 に答える
1

もし、あんたが：

  1. チェックボックスを含む ul に id を与える
  2. テーブルにIDを与える
  3. id を含む tr css クラスに何らかの規則を使用する

その後、次のことができます - jsfiddle :

$('#sectionslist input').change(function() {
   $('#offersTable .offerId' + $(this).val()).toggle();
});
于 2013-07-02T11:03:57.077 に答える