Question

Working with ASP.NET MVC, KnockoutJS and I am using Require JS.

I have a view that I am passing back a object that retains 2 Knockout view models. To keep this simple, the parent view is a list of projects. You have the ability to Create a new product or edit one on the list by clicking the appropriate button. Either button will intialize a jQuery dialog which is populated by getting a returned PartialView from my controller.

At the time the partial view is retrieved, I bind a Knockout View model (property on the original returned RequireJS object) to that partial view. I have no problems creating a new product, taking the KO view model and saving it back to the controller action.

The Problem

The problem comes in when attempting to load an existing product into the PartialView. I need to be able to populate the KO viewModel with initial values. A possible solution would be if I could pass the MVC View model from the controller into my existing RequireJS object I could initialize the KO viewmodel with the existing properties values. However, I can’t figure out how to access the existing returned javascript object on the product list view in my partialview view.

The only wrong way that I can get the MVC model on the partialview passed in, is if I wire up Require JS on the partial view and pass back a new instance of the object and pass in the MVC Model, but that just breaks the current jQuery dialog call backs to the original object.

Example:

Parent Product List View

      ......bunch of html
     </li>
   </ul>
 </div>

 @{
   <script type="text/javascript">
      require(['jquery', 'items/adminItemsList', 'jquery-validate-unobtrusive' ],    function ($, viewModel) {
        $(function () {
             viewModel.initialize({
              addUrl: '@Url.Action("Add")',
              listUrl: '@Url.Action("List")',
              editUrl: '@Url.Action("Edit")',
              deleteUrl: '@Url.Action("Delete")'
          });
      });
  });

}

The jQuery Dialog PartialView

      ....bunch of Html
   </div>
  </div>

 <script type="text/javascript">
    viewModel.Model(@Html.Json(Model))   //I need to be able to do something like this
 </script>

The Json method is just a HtmlHelper extension.

How do I setup the returned RequireJS object to be accessible, or what is a better way to design this.

I have and need:

1. I have Product List View
2. A View for a Create/Edit Product
3. The Product list View javascript owns the jQuery Dialog that generates the Create/Edit product view so it needs to not break the callback functions (i.e. onSuccessfulSubmit…)

Thoughts?

Answer 1

What I ended up doing is splitting out my ViewModels (since really there is two different views) and on the one ViewModel that I need to pass the rendered MVC Model object, I made it an accessible public property off the ViewModel so it can be accessed and serialized by the shared components of the other ViewModel.