녹아웃 3 데이터 바인딩 문제

Question

내 응용 프로그램에서 부트 스트랩과 녹아웃을 MVC4에 통합하려고합니다. 사용자가 항목을 선택할 수있는 위치에서 두 개의 드롭 다운 컨트롤을 사용하고 jQuery를 사용하여 그 옆에있는 텍스트 상자를 채 웁니다. ViewBag 및 @foreach 루프를 사용할 때 문제없이 작동하지만 녹아웃 관찰을 사용하려고하면 문제가 발생합니다.

내 ViewModel의 데이터가 드롭 다운 컨트롤에 표시되지만 텍스트 상자의 해당 값은 업데이트되지 않습니다. 사용해야 할 특수 데이터 바인딩 특성이 있습니까?

일부 코드 ...

<div class="container"> 
    <div class="col-sm-7 well"> 
     <form class="form-inline" action="#" method="get"> 
      <div class="input-group col-sm-8"> 
       <input class="form-control" value="" placeholder="Work Section" name="q" type="text"> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
         <li data-bind="foreach: Names"> 
          <a href="#" data-bind="text: Name, value: Name"></a> 
         </li> 
        </ul> 
        <input name="category" class="category" type="hidden"> 
       </div> 
      </div> 
      <div class="input-group col-sm-8"> 
       <input class="form-control item" value="" placeholder="Select a Color" name="color" type="text"> 
       <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle item" data-toggle="dropdown">Select <span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
         @foreach (var item in ViewBag.Colors) 
         { 
          <li> 
           <a href="#">@item</a> 
          </li> 
         } 
        </ul> 
        <input name="category" class="category" type="hidden"> 
       </div> 
      </div> 

문제는 잘 작동되는 색상으로 이름 foreach는 함께입니다.

페이지의 컨트롤을 찾고 선택한 항목을 가져 와서 입력 컨트롤에 배치하려면이 도구를 사용하고 있습니다 ... 이제는 색상 드롭 다운에서만 작동합니다.

$(function() { 
     $(".dropdown-menu li a").click(function() { 
      $(this).parents(".input-group").find('.form-control').text($(this).text()); 
      $(this).parents(".input-group").find('.form-control').val($(this).text()); 
     }); 
    }); 

다음 두 가지 방법을 시도해 보지 않았습니다.

<p>Current selection is <span data-bind="text: selectedName"></span></p> 

: ...의 첫 번째 응답을 시작하자

내가 페이지

$(function ViewModel() { 
    alert('Here'); // To test if the code generating the model is executed 
    this.Names = [{ name: "Person 1", name: "Person 2" }]; 

    this.selectedName = ko.observable(); 
    this.clickName = function (name) { this.selectedName = name; } 
}); 

다음의 상단에있는 내 태그에 다음과 같은 배치는 내 페이지 상단에 새로운 배치

이

<ul class="dropdown-menu" data-bind="foreach: Names"> 
    <li class="dropdown"> 
     <a href="#" data-bind="text: Name, value: Name, click: clickName(Name)"></a> 
    </li> 
</ul> 

드롭 다운이 비어 및 사업부 결코 g :

마지막으로, 나는 부트 스트랩 드롭 다운에이 코드를 배치 ets가 업데이트되었습니다.

OK, 내가 만든 뷰 모델을 복용하고 클릭을 통합 후 : 함수() {$ root.Name (이름);} 내가 지금은 희망으로 내 가치 업데이트를 볼 수 있어요.

여기 그냥 공상 CSS의이 아니라 정말 내보기 모델 코드 부트 스트랩에 의해 생성

$(document).ready(function() { 
    function ViewModel() { 
     var self = this; 
     self.Name = ko.observable(""); 

     var Names = { 
      Name: self.Name 
     }; 

     self.Name = ko.observable(); 
     self.Names = ko.observableArray([{ Name: "Brian" }, { Name: "Jesse" }, {Name: "James"}]); 
    } 

    var viewModel = new ViewModel(); 
    ko.applyBindings(viewModel); 
}); 

Answer 1

드롭 다운 등의 제어합니다. 따라서 부트 스트랩 드롭 다운 선택은 수동으로 처리해야합니다. 이것은 녹아웃 이 실제로 도움이되는 곳입니다.

위의 코드를 기반으로 간단한 jsFiddle을 만들었습니다.

이가 비슷하게 드롭 다운 (바인딩 foreach의 위치를주의가 ul보다는 li에, 질문의 예와 다르다) :이 비슷한 뷰 모델을 가정

<ul class="dropdown-menu" data-bind="foreach: Names"> 
     <li class="dropdown"> 
      <a href="#" data-bind="text: Name, value: Name, click: function() {$root.selectedName(Name);}"></a> 
     </li> 
    </ul> 

에 다음 click 바인딩을 사용하여 그래서

var ViewModel = function() { 
    var self = this; 

    //Properties 
    self.selectedName = ko.observable("NONE"); 
    self.Names = ko.observableArray([ 
     { Name:"Name1" }, 
     { Name:"Name2" }, 
     { Name:"Name3" }, 
    ]);  

} 

, 그것은 다시 넉 아웃 뷰 모델에 사용자 선택을 공급하는 것이 가능하다.물론,보기의 함수 (function() {$root.selectedName(Name);} 비트) 대신에, 그것은 이상적으로는 ViewModel 메쏘드가 될 것이지만, 나는 그것을 먼저 이렇게 명백하게 보여줄 것이라고 생각했다. 그런 다음 당신이 당신의 링크를 텍스트 필드에 data-bind="text: selectedName" 및 data-bind="click: clickName(Name)"을 둘 것입니다

function ViewModel() { 
    this.Names = [{name: x}, ...]; 
    this.selectedName = ko.observable(); 
    this.clickName = function(name) { this.selectedName(name); } 
} 

을 다음과 같이 확장해야

function ViewModel() { 
    this.Names = [{name: x}, ...]; 
} 

처럼

Answer 2

가정 뷰 모델은 현재 보인다. jQuery 선택기가 필요 없으므로 데이터 상호 작용을 DOM 구조에서 분리 할 수 ​​있습니다.