1

ノックアウトは最高です....同時に、落とし穴にちょっとフラストレーションを感じます....:|

ここに私のコードがあります

    <html>
    <head>


    @using MvcJqGrid;
    @using System.IO;
    @using System.Web.Mvc;
    @using System.Web.Script.Serialization;
    @{
        Layout = "";



        JavaScriptSerializer theSerializer = new JavaScriptSerializer();


        }





    <link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery-ui.css" />
    <link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery.ui.base.css" />
    <link rel="Stylesheet" type="text/css" href="Content/themes/base/jquery.ui.theme.css" />
    <link rel="Stylesheet" type="text/css" href="Content/ui.jqgrid.css" />


    <script type="text/javascript" src="Scripts/modernizr.custom.05850.js"></script>

    <script type="text/javascript" src="Scripts/jquery-1.7.2.js" > </script>

    <script type="text/javascript" src="Scripts/jquery-ui-1.8.19.js"> </script>

    <script  type="text/javascript"  src="Scripts/grid.locale-en.js" ></script>

    <script   type="text/javascript" src="Scripts/jquery.jqGrid.min.js"></script>

    <script type="text/javascript" src="Scripts/json2.min.js"></script>

    <script type="text/javascript" src="Scripts/knockout-2.1.0.js"></script>

    <script type="text/javascript" src="Scripts/knockout.mapping-latest.js"></script>

    <script type="text/javascript" src="Scripts/linq.min.js"></script>

    </head>



    <body>


    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->

    <p>View Name: <input data-bind="value: Name " /></p>
    <p>No Of Results: <input data-bind="value: noOfResultsPerPage "/></p>


    <p id='filterEnable'>

     click me to invoke ajax service
    </p>


    <input type=text value="tester" id="testInput" />



<input type=text  value='test' data-bind='value:myComputedFilterExpression' id="linqTester" />



    <p id='myLabel' >
       container 

    </p>


    <p id='addFilterExpression' >add Filter</p>
    <table data-bind='visible: filterArray().length > 0'>
            <thead>
                <tr>
                    <th>filterExpression</th>
                    <th />
                    <th />
                </tr>
            </thead>
            <tbody data-bind='foreach: filterArray'>
                <tr>
                    <td data-bind"text :theExpression,value :theExpression"> 


                      Where  <select class='required' data-bind="options: $root.options, optionsCaption: 'Select...'" />    

                          <input type='text' id='uifix' style='display:none' />    

                                    <select class='required' data-bind="options: $root.filterExpressionValues, optionsCaption: 'Select...'" />

                          <input type='text' id='inputValue' />    
                            <select class='required' data-bind='options: $root.queryOptions,  optionsCaption: "Select..."' />



                    </td>

                    <td><a href='#' data-bind='click: $root.removeFilter'>Delete</a></td>
                    <td><a href='#' data-bind='click: $root.addFilter'>Add</a></td>


                </tr>
            </tbody>
        </table>



     <script type="text/javascript"> 
    $(function () {
        var viewModel = null;

         var  myOptions=@Html.Raw(PseudoSharepointView.getAllVariables()); 




        function FilterExpression()
        {    


         this.theExpression="";

        }

        function Success(data, status) {
            $("#myLabel").html(data.d);
        }

        function Error(request, status, error) {
            $("#myLabel").html(request.statusText);
        }

        $('#filterEnable').click(function () { 
            CallService();
        }); 



        var test=@Html.Raw(PseudoSharepointView.getAView());
        // Activates knockout.js 
        viewModel = ko.mapping.fromJS(test);
         viewModel.options=myOptions;
         viewModel.queryOptions=["and","or"];
         viewModel.filterExpressionValues=@Html.Raw(theSerializer.Serialize(PseudoSharepointView.SharepointColumn.FilterExpressionValues));
         var test=ko.mapping.toJS(viewModel);


         $("#testInput").val(JSON.stringify(test));


         viewModel.filterArray=ko.observableArray([new FilterExpression()]);



          viewModel.myComputedFilterExpression = ko.computed(function() {
            return Enumerable.From((viewModel.filterArray())).Select('$.theExpression').Aggregate("(a,b)=>a+''+b");
        });

        // Operations
        viewModel.addFilter = function() { 

        viewModel.filterArray.push(new FilterExpression());



        };
        viewModel.removeFilter = function(filter) {

        viewModel.filterArray.remove(filter) ;



        };




        ko.applyBindings(viewModel);




         $('#addFilterExpression').click(function () { 

         testArray= new Array();

         testArray[0]= new FilterExpression();
         testArray[0].theExpression="1";


         testArray[1]= new FilterExpression();
         testArray[1].theExpression="2";


          var test=Enumerable.From((viewModel.filterArray())).Select('$.theExpression').Aggregate("(a,b)=>a+''+b");


             $('#linqTester').val(test);
        }); 

        function CallService() {

            $.ajax({

                type: "POST",
                url: "myMethodsRepository.asmx/HelloWorld",
                data: "{viewValue:'"+JSON.stringify(ko.mapping.toJS(viewModel))+"'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: Success,
                error: Error
            });
        }



    });

    </script> 

    </body>
    </html>

私の質問は次のとおりです

1）双方向バインディングが機能するために実行する必要があることはありますか....UIの更新は確かに行われますが、実際の値はそれ自体を更新しません...明らかに、ここで何かを見逃しています

2) 私の計算関数

viewModel.myComputedFilterExpression = ko.computed(function() {
        return Enumerable.From((viewModel.filterArray())).Select('$.theExpression').Aggregate("(a,b)=>a+''+b");
    });

変数自体が更新されていないため、機能していないようです

私はこのデバッグ支援を使用しました

<input type=text  value='test' data-bind='value:myFilterExpression'  id="linqTester" />

必要な文字列式が配列から構築されることをあなたが知っていることを願っています

監視可能な配列への双方向バインディングの基本的な/noobフレンドリーな説明が必要です....誰かが私の現在のコードでそれを見せてくれるなら、神の祝福を... :)

4

1 に答える 1

8

問題はmyComputedFilterExpression、列挙可能な式を返す読み取り専用の計算関数であるということです。バリューバインディングによって何が更新されると期待していましたか？

計算された観測可能な読み取り/書き込みを行うには、そのように定義する必要があります。また、ここのドキュメントの書き込み可能な計算されたオブザーバブルでカバーされています。

this.fullName = ko.computed({
    read: function () {
        return this.firstName() + " " + this.lastName(); 
    },
    write: function (value) {
        var lastSpacePos = value.lastIndexOf(" ");
        if (lastSpacePos > 0) { // Ignore values with no space character
            this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
            this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
        }
    },
    owner: this
});

値バインディングが計算値を更新すると、書き込み定義関数で新しい値を受け取り、それを基になる値にマップするのはあなたの仕事です。

お役に立てれば

于 2012-05-17T15:55:29.903 に答える