Knockoutjs 단일 페이지 응용 프로그램 바인딩 문제

Question

안녕하세요. 그래서 Knockoutjs, Sammy.js 및 Rest Web API를 사용하는 단일 페이지 응용 프로그램 .Net에서 작업하고 있습니다. 나는이 라이브러리에 다소 익숙하며 몇 가지 핵심 디자인 문제에 직면했으며 몇 가지 통찰력을 얻고 자합니다.

내가 가진 주요 문제는 특정 요소를 대상으로 한 knockouts ko.applybinding을 사용하는 것입니다.

this.get("#/Classroom", function(context) { 
    dataPack.build(PageLoc, context) 
    appPres.reload(); 
    ko.applyBindings(new classroomVmCore.View(), document.getElementById('view-Classroom')); 

}); 

이것은 단일 페이지 응용 프로그램이므로 내보기를 동적으로 추가해야합니다. dataPack.build은 내보기를 움켜 잡고 단일 페이지의 컨텍스트에 바인딩합니다. 그 기능은 예상대로 잘 작동하지만 ko.applyBindings에 올 때 나는 .. 다음과 같은 문제가 발생 찾을

1. 모든 페이지 새로 고침 내보기 모델을 잃고 sammy.js 해시 충돌하지 않을 경우 데이터가 누락됩니다. 이 문제는 주로 공유 항목 (예 : 탐색 항목, 레이아웃 항목 등)에서 발생합니다. #/Classroom 해시를 다시 칠 때이 데이터에 자체보기 모델이 있으므로 공유 모델이 손실됩니다.

2. 내보기 모델에 아래의 생성자 함수를 사용하는 것 외에 다른 옵션이 있습니까? 변수를 설정 한 다음 해당 변수를 조정하거나 추가하려고해도 내 모델이 조정되지 않는 것 같습니다.

언제든지 내 모델을 업데이트/새로 고침하여 페이지를 새로 처리 할 수있는 방법을 찾고 있습니다.

SPA에 이러한 라이브러리를 사용하는 사람이 있습니까? 어떻게 견해와 바인딩을 구성 했습니까?

도움이나 의견을 크게 주시면 감사하겠습니다.

Answer 1

녹아웃 기능이있는 SPA로 내 사이트 (여기에 연결하지 않고 원하는 경우 프로필 참조)를 만들었습니다. 실제로 목표를 달성하기 위해 템플릿을 사용합니다. 이것은 내가하는 일의 예를 보여주는 짧은 예다.

죄송 합니다만, sammy.js를 사용해 본 적이 없습니다. 귀하의 의견

function MainVM() { 
 
    var self = this; 
 

 
    self.ContactVM = ko.observable(new AboutMeVM('John', 'code')) 
 

 
    self.Content = ko.observable({ 
 
    name: 'HomeTemplate' 
 
    }); 
 

 
    self.ShowHome = function() { 
 
    // Page using MainVM 
 
    self.Content({ 
 
     name: 'HomeTemplate' 
 
    }); 
 
    } 
 

 
    self.ShowContact = function() { 
 
    // Page with on demand VM 
 
    self.Content({ 
 
     name: 'ContactTemplate', 
 
     data: new ContactVM('me', "555-5555") 
 
    }) 
 
    } 
 

 
    self.ShowContactSteve = function() { 
 
    // Page with on demand VM 
 
    self.Content({ 
 
     name: 'ContactTemplate', 
 
     data: new ContactVM('Steve', "555-1234") 
 
    }) 
 
    } 
 

 
    self.ShowAboutMe = function() { 
 
    // Page with a static VM 
 
    self.Content({ 
 
     name: 'AboutMeTemplate', 
 
     data: self.ContactVM 
 
    }); 
 
    } 
 
} 
 

 

 

 
function ContactVM(name, number) { 
 
    var self = this; 
 
    self.Name = ko.observable(name); 
 
    self.Phone = ko.observable(number); 
 
} 
 

 
function AboutMeVM(name, job) { 
 
    var self = this; 
 
    self.Name = ko.observable(name); 
 
    self.Job = ko.observable(job); 
 
} 
 

 
ko.applyBindings(new MainVM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<script type="text/html" id="AboutMeTemplate"> 
 
    About me:<br> i am <span data-bind="text: Name"></span> and I <span data-bind="text: Job"></span> 
 
</script> 
 

 
<script type="text/html" id="ContactTemplate"> 
 
    Contact <span data-bind="text: Name"></span>: <span data-bind="text: Phone"></span> 
 
</script> 
 

 
<script type="text/html" id="HomeTemplate"> 
 
    Welcome to my website 
 
</script> 
 

 
<div> 
 
    <h3>Links</h3> 
 
    <a data-bind="click: ShowHome">Home</a> <br> 
 
    <a data-bind="click: ShowContact">Contact Me</a><br> 
 
    <a data-bind="click: ShowContactSteve">Contact Steve</a><br> 
 
    <a data-bind="click: ShowAboutMe">About Me</a><br> 
 
    <hr> 
 
    <h3> Page content</h3> 
 
    <div data-bind="template: Content"></div> 
 
</div>