knockoutjs雙向綁定的例子需要

淘汰賽是真棒....同時我覺得有點沮喪的陷阱....：|knockoutjs雙向綁定的例子需要

繼承人我的代碼

<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 [email protected](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 [email protected](PseudoSharepointView.getAView()); 
     // Activates knockout.js 
     viewModel = ko.mapping.fromJS(test); 
     viewModel.options=myOptions; 
     viewModel.queryOptions=["and","or"]; 
     [email protected](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" />

希望爲u KNW所需字符串表達式WUD被從陣列

構造我需要一個基本的/ noob友好的解釋，兩種方式綁定到一個可觀察數組....如果有人願意用我當前的一段代碼來展示它，上帝保佑他們...... :)

來源

2012-05-16 Amarnath Sameeran

問題是myComputedFilterExpression是返回可枚舉表達式的只讀計算函數。你期望通過你的價值綁定來更新什麼？

要進行計算可讀可讀寫，您需要像這樣定義它。在可寫計算觀察值下的文檔here中也有介紹。

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-17 15:55:29 madcapnmckay

馬安感謝，順便說一句我已經發布的代碼前面是廢話......所以計算觀察到的是像獲取屬性和set方法... –

是的完全一樣，只要將它們看作屬性即可。默認情況下他們是獲取，但你也添加一個集合。 – madcapnmckay

knockoutjs雙向綁定的例子需要

回答

相關問題