2013-10-09 5 views
3

다음 코드에서 잡히지 않은 오류가 발견되었습니다 .. 바인딩이 여러 번 바인딩을 적용 할 수 없을 때까지 한 번만 적용됩니다 ... 녹아웃 버전의 문제입니까? 이knockoutjs는 동일한 요소에 여러 번 바인딩을 적용 할 수 없습니다

 var DummyContact = [ 
     { 
      "ContactID": 1, 
      "FirstName": "Nimesh", 
      "LastName": "Vaghasiya" 
     }, 
     { 
      "ContactID": 2, 
      "FirstName": "John", 
      "LastName": "Cena" 
     } 
    ]; 

    var ContactViewModel = function() { 
     var self = this; 
     var url = "/Contacts/GetAllContacts"; 
     //var refresh = function() { 
     // $.getJSON(url, {}, function (data) { 
     //  self.Contacts(data); 
     // }); 
     //}; 
     var refresh = function() { 
      self.Contacts(DummyContact); 
     }; 

     // public data properties 
     self.Contacts = ko.observableArray([]); 
     refresh(); 

     self.createContact = function() { 
      window.location.href = '/Contacts/CreateEdit/0'; 
     }; 

     self.editContact = function (Contact) { 
      window.location.href = '/Contacts/CreateEdit/' + Contact.ContactID; 
     }; 

     self.removeContact = function (Contact) { 
      if (confirm("Are you sure you want to delete this profile?")) { 
       self.Contacts.remove(Contact); 
      } 
     }; 
    }; 
    ko.applyBindings(new ContactViewModel()); 

HTML 코드는 ... immediatly 호출 기능의 코드를 다음 쓰기가 될 수 있습니다

@{ 
     ViewBag.Title = "Index"; 
     Layout = "~/Views/Shared/_Layout.cshtml"; 
    } 
    <html> 
    <body> 

     <input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createContact" /> 
     <hr /> 
     <table class="table table-striped table-bordered table-condensed"> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th></th> 
      </tr> 
      <tbody data-bind="foreach: Contacts"> 
       <tr> 
        <td class="name"><a data-bind="text: FirstName, click:$parent.editContact"></a></td> 
        <td data-bind="text: LastName"></td> 
        <td> 
         <button class="btn btn-mini btn-danger" data-bind="click:$parent.removeContact">remove</button></td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
    </html> 

    <script src="~/Scripts/Contact.js"></script> 

// 레이아웃

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     <meta name="viewport" content="width=device-width" /> 
     @Styles.Render("~/Content/css") 
     @Styles.Render("~/Content/themes/base/jquery.ui.all.css") 
     @Styles.Render("~/Content/themes/base/jquery.ui.dialog.css") 
     @Scripts.Render("~/bundles/modernizr") 
     @Scripts.Render("~/bundles/knockout") 
    </head> 
    <body> 
     <header> 
      <div class="container content-wrapper"> 
       <div class="float-left"> 
        <p class="site-title"> 
         <a href="@Url.Action("Index", "Home")"> 
          <img src="~/Content/themes/base/images/address-book.png" style="margin-left: -5px" /></a> 
        </p> 
       </div> 
       <div class="float-right"> 
        <section id="login"> 
         @Html.Partial("_LoginPartial") 
        </section> 
        <nav> 
         <ul id="menu"> 
          <li>@Html.ActionLink("Home", "Index", "Home")</li> 
          @if (Request.IsAuthenticated) 
          { 
           <li>@Html.ActionLink("Groups", "Index", "Groups")</li> 
           <li>@Html.ActionLink("Contacts", "Index1", "Contacts")</li> 
           <li>@Html.ActionLink("Address", "Index", "Address")</li> 
           <li>@Html.ActionLink("Email", "Index", "Emails")</li> 
           <li>@Html.ActionLink("Numbers", "Index", "Numbers")</li> 
          } 
          <li>@Html.ActionLink("Contact Us", "Contact", "Home")</li> 
          <li>@Html.ActionLink("About", "About", "Home")</li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
     </header> 
     <div id="body"> 
      @RenderSection("featured", required: false) 
      <section class="content-wrapper main-content clear-fix container"> 
       @RenderBody() 
      </section> 
     </div> 
     <footer> 
      <div class="content-wrapper container"> 
       <div class="float-left"> 
        <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p> 
       </div> 
      </div> 
     </footer> 

     @Scripts.Render("~/bundles/jquery") 
     @Styles.Render("~/Content/bootstrap/bootstrap.css") 
     @Scripts.Render("~/bundles/jqueryui") 
     @Scripts.Render("~/bundles/jqueryval") 
     @Scripts.Render("~/Scripts/modaldialog.js") 
     @RenderSection("scripts", required: false) 
    </body> 
    <script type="text/javascript"> 
     (function() { 
      $("#body").show({ effect: "drop", direction: "down", distance: 200, duration: 1000 }) 
     })(); 
    </script> 
    </html> 
+0

바인딩이 사용되는 html 코드를 포함 – super

+0

보기 코드 포함 –

+0

본 적이 있습니까? http://stackoverflow.com/questions/18953280/knockoutjs-v2-3-0-cannot-apply-bindings-multiple- 시간이 같은 요소? rq = 1 –

답변

9

당신의 HTML을 변경 그래서 이런 식으로 뭔가 :

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<html> 
<body> 
    <div id="unique-view-data"> 
    <input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createContact" /> 
    <hr /> 
    <table class="table table-striped table-bordered table-condensed"> 
     <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th></th> 
     </tr> 
     <tbody data-bind="foreach: Contacts"> 
      <tr> 
       <td class="name"><a data-bind="text: FirstName, click:$parent.editContact"></a></td> 
       <td data-bind="text: LastName"></td> 
       <td> 
        <button class="btn btn-mini btn-danger" data-bind="click:$parent.removeContact">remove</button></td> 
      </tr> 
     </tbody> 
    </table> 
    </div> 
</body> 
</html> 

<script src="~/Scripts/Contact.js"></script> 

그리고이에 자바 스크립트의 마지막 줄을 변경 :

ko.applyBindings(new ContactViewModel(), document.getElementById("unique-view-data")); 

에만 두 번째 매개 변수에 지정된 DOM 요소에 바인딩을 적용하려면 녹아웃을 알려줍니다.

바인딩을 적용하려고하는 다른보기 모델이있을 것으로 생각됩니다. 이 경우 다른보기 모델을 적절히 업데이트하십시오.

+0

다른 viewModel에서 무엇을 액세스 할 수 있는지 conctacViewModel의 컨텍스트는 무엇입니까? – Geomorillo

+0

나는 당신이 무엇을 요구하고 있는지 정말로 이해하지 못한다 –

+0

그가 다른 viewmodel을 만들고 다른 dom 요소에 바인딩을하면 고유보기 데이터에 바인딩을 적용하고있다.이 새로운 내부에서 관찰 할 수있는 self.Contacts를 액세스하거나 참조하는 방법 하나? – Geomorillo

관련 문제