0

试图找到一种优雅的方式来处理 jsViews 模板中的双向数据绑定属性上的验证客户端。作为参考示例，请在此处的 jsView 的 API 链接中查看 jsViews 双向绑定的 PI 文档：http: //www.jsviews.com/#jsvplaying。

我想在使用新值更新视图之前更新属性时验证“名称”。任何示例/指导/想法将不胜感激！

谢谢，

4

4 回答 4

1

现在 jsviews.com 上有许多示例显示了一种验证方法。

于 2013-10-09T02:17:33.200 回答
0

试试欧芹。这是一个非常易于使用的 javascript 库，用于进行各种验证。

于 2013-09-03T18:56:22.480 回答
0

我找到了我正在寻找的答案。我使用的版本在使用 $.observable 和/或更新属性时没有取消方法。这里的解决方案：

当我在模态中更改属性的设置时，我设置了一个全局属性，以便 onBeforeChange 事件返回 false。然后我对用户输入的新值进行验证。如果它通过验证，然后我通过 observable、setProperty 更新它，然后关闭全局设置。这允许投标在视图中相应地更新，但在验证发生之前不更新。

一个例子，简单的例子，可以在下面找到

 <table><tbody id="pageList"></tbody></table>

 //template for the table
 <script id="pageTmpl" type="text/x-jsrender">  
  {^{for pages}}
    <tr>
       <td data-link="name"></td>
       <td>
          <input data-link="name" class="page-names"/>
       </td>
       <td>
         <button id="save" class="saveCmd">Save</button>           
         <button id="cancel"  class='cancelCmd'>Cancel</button>                      
       </td>
    </tr>
  {{/for}}
 </script>

以及推送它的javascript：

  var isModal = true;
  $.views.helpers({
    onBeforeChange: function(ev, data)
    {            
               //this would be global setting if in a modal              
               if(isModal)          
               {                
                  return false;   
                }
    },
    onAfterChange: function (ev, data)
    {           
       //this would be global setting if in a modal 
              if(isModal)           
              {                
                return false;   
              }
            }
         });


   $(document).ready(function(){      
   //not used at moment!!!
   $(".saveCmd").on("click", function(){         
      var dataItem = $.view(this).data,
          newVal   = $(this).parent().parent().find('input').val();

      //validate newValue
      if(!ValueIsValid(newVal))
      {
           alert("Must be 10 characters or less!");   
      }
      else
      {
         isModal = false;
         $.observable(dataItem).setProperty("name", newVal);            
         isModal = true;

      }
   });
   $(".cancelCmd").on("click", function(){
      var dataItem = $.view(this).data;         
      $(this).parent().parent().find('input').val(dataItem.name);          
   });
});

  //KETHCUP VALIDATION FUNCTION mock example
  function ValueIsValid(val)
  {       
   return val.length < 11;
  }

//variables and setup for initial objec.
var myTemplate = $.templates("#pageTmpl");

var pages = [
{
  name: "Q100"
},
{
  name: "Q200"
}
];

var app = {
 pages: pages
};

var counter = 1;

myTemplate.link("#pageList", app);

小提琴演示链接：http: //jsfiddle.net/Duj3F/171/

于 2013-09-05T18:18:27.583 回答
0

这个问题是通过返回 false 来解决的，在 jsViews 中处理“onBeforeChange”事件。因此，我们有一个开关，如果触发了验证，该开关就会打开，并且不允许对绑定的元素进行更新。一旦验证被修复，我们就关闭该开关，并且“onBeforeChange”运行。我对这个问题的困惑表示歉意，但需要解决方案的问题不是验证，而是如何中断 jsViews 以两种方式绑定更新数据绑定对象。感谢大家的帮助！

于 2013-10-10T15:25:42.163 回答