MVC4 목록에 바인딩 된 Knockoutjs <>

Question

저는 클라이언트 측 자바 스크립트를 이벤트 처리기의 복잡성에서 더 체계적인 시스템으로 발전시키고 자하는 C# MVC 개발자이므로 knockoutjs를 살펴보기 시작했습니다. 처음에는 훌륭해 보였고 제작 환경에 배치하는 방법에 대한 아이디어가 빠르게 형성되었습니다. 나는 문제없이 아주 잘 작동 한 몇 가지 기본 원칙을 시도했다. 좀 더 복잡한 작업을하고 싶습니다 (작업중인 프로젝트에만 해당).하지만 작동시키지 못합니다.

다른 예제를 검색했지만 실제로 일치하는 항목을 찾지 못했습니다.

내가하고 싶은 것은 개체 목록을 클라이언트쪽에 바인딩하는 것입니다. 이 예제에서는 페이지에 표시되는 사람 목록을 사용 중이며 Ajax 요청에 대한 페이지의 모든 사용자를 업데이트하려고합니다 (이 예제는 테스트 용으로 순전히 제작 된 것이지만 원리는 내가 무엇인지입니다.) 후).

나는

이

내 C# 코드

public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      List<Person> people = new List<Person>() 
      { 
       new Person() 
       { 
        FirstName = "Neil", 
        LastName = "Diamond" 
       }, 
       new Person() 
       { 
        FirstName = "Bob", 
        LastName = "Seager" 
       }, 
       new Person() 
       { 
        FirstName = "Tom", 
        LastName = "Jones" 
       } 
      }; 

      return View(people); 
     } 

     public JsonResult UpdateNames() 
     { 
      Random r = new Random(); 
      var num = r.Next(1, 100); 
      List<Person> people = new List<Person>() 
      { 
       new Person() 
       { 
        FirstName = string.Concat("Neil", num.ToString()), 
        LastName = string.Concat("Diamond", num.ToString()) 
       }, 
       new Person() 
       { 
        FirstName = string.Concat("Bob", num.ToString()), 
        LastName = string.Concat("Seager", num.ToString()) 
       }, 
       new Person() 
       { 
        FirstName = string.Concat("Tom", num.ToString()), 
        LastName = string.Concat("Jones", num.ToString()) 
       } 
      }; 
      return Json(people, JsonRequestBehavior.AllowGet); 
     } 
    } 

내보기

@model List<TestingKnockout.Models.Person> 

@{ 
    ViewBag.Title = "Home Page"; 
} 

@for (int i = 0; i < Model.Count; i++) 
{ 
    <p>Firstname: <strong data-bind="text: [@i].FirstName"></strong></p> 
    <p>Lastname: <strong data-bind="text: [@i].LastName"></strong></p> 
    <hr /> 
} 

@section scripts 
{ 
    <script src="~/Scripts/knockout-2.1.0.js"></script> 
    <script src="~/Scripts/knockout.mapping.js"></script> 
    <script type="text/javascript"> 
     var viewModel = {}; 
     $.ajax({ 
      url: "/Home/UpdateNames", 
      cache: false, 
      success: function (data) { 
       viewModel = ko.mapping.fromJS(data); 
       ko.applyBindings(viewModel); 
      } 
     }); 

     setInterval(function() { 
      $.ajax(
       { 
        url: "/Home/UpdateNames", 
        cache: false, 
        success: function (data) { 
         ko.mapping.fromJS(data, viewModel); 
        } 
       }); 
     }, 5000); 
    </script> 
} 

이 어떤 도움을 크게 감상 할 수 나를 위해 모델 매핑을 수행 할 knockoutjs 매핑 플러그인을 사용하거나하는 경우입니다 나는 분명한 사실을 놓치고있다. 또는이 질문이 오기 전에 올바른 방향으로 나를 가리 키도록한다.

감사

편집 토마스와 로드니에서 모두 답변

, 내가 잘못 녹아웃의 일부 동작을 가정했다 나타납니다. 녹아웃은 전체 모델을 JSON으로 시작한 다음 거기에서 업데이트해야합니다. 초기 데이터로 HTML을 렌더링 한 다음 업데이트를 처리하기 위해 녹아웃을 얻으려고했지만 내 방식이 올바르지 않다고 생각합니다. 토마스에서 HTML 및 (json으로 직렬화 사람들 관측에 사소한 변경) 로드니의 코드에서 리드를 복용 나는 내보기 코드를 변경 다음과 모두가 잘 나는 것 지금

@model List<TestingKnockout.Models.Person> 

@{ 
    ViewBag.Title = "Home Page"; 
} 

<div data-bind="foreach: people"> 
    <p>Firstname: <strong data-bind="text: FirstName"></strong></p> 
    <p>Lastname: <strong data-bind="text: LastName"></strong></p> 
    <hr /> 
</div> 
@section scripts 
{ 
    <script src="~/Scripts/knockout-2.1.0.js"></script> 
    <script src="~/Scripts/knockout.mapping.js"></script> 
    <script type="text/javascript"> 
     var viewModel = { 
      people: ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)))  
      }; 
     ko.applyBindings(viewModel);  

     setInterval(function() { 
      $.ajax(
       { 
        url: "/Home/UpdateNames", 
        cache: false, 
        success: function (data) { 
         ko.mapping.fromJS(data, viewModel.people); 
        } 
       }); 
     }, 5000); 
    </script> 
} 

을 작동하는 것 같다 Tomas와 Rodney 모두에게 답을주고 싶습니다. 선택해야만하는 것은 로드니가 가장 미안한 토마스에게 도움이되었다고 생각합니다.

Answer 1

Tomas의 답변에서 HTML을 사용하십시오.

초기 C# 모델을 자바 스크립트 목록으로 serialize해야합니다. 이 작업을 수행하는 일반적인 방법은 JSON.NET 라이브러리를 사용하는 것입니다.

는

@using Newtonsoft.Json 
@{ 
    var jsPeople = Html.Raw(JsonConvert.SerializeObject(Model)); 
} 

다음으로 자바 스크립트의 모든 바꾸기 뷰의 시작 부분이 C# 코드를 추가

var viewModel = { people: ko.observable([]) }; 
viewModel.people(ko.mapping.fromJS(@jsPeople)); 

setInterval(function() { 
    $.ajax(
    { 
     url: "/Home/UpdateNames", 
     cache: false, 
     success: function (data) { 
      viewModel.people(ko.mapping.fromJS(data)); 
     } 
    }); 
}, 5000); 

$(document).ready(function(){ 
    ko.applyBindings(viewModel); 
}); 

아, 그리고 난 여기에 jQuery를 사용한 것을 언급해야한다 문서 준비가 완료되면 applyBindings를 수행하십시오.

Answer 2

어떻게 사용해야하는지에 대한 요점이 없습니다. 뷰 템플릿 (HTML)을 설정해야합니다. 그런 다음 JSON 형식으로 데이터를로드하거나 제공되는 페이지와 함께 올 수 있습니다.

데이터를로드하거나 초기 데이터 세트를로드 한 후에 바인딩을 적용 할 수 있습니다. 그러나 그것은 단 한 번만 발생해야합니다. ASP.NET MVC 뷰를 사용하여 모델을 렌더링하는 습관을 버려야합니다. 넉 아웃은 HTML 템플릿에 데이터 바인딩을 담당해야합니다.

데이터를로드하기 전에 또는로드하는 동안 화면에 표시되는 것을 제어 할 수 있습니다. 또한 애플리케이션 로직은 자바 스크립트에 있으며 객체를 조작하고 UI 업데이트는 Knockout에서 처리합니다.

<div data-bind="foreach: people"> 
    <p>Firstname: <strong data-bind="text: FirstName"></strong></p> 
    <p>Lastname: <strong data-bind="text: LastName"></strong></p> 
</div>