Question

I have a knockout template (using koExternaltemplateEngine_all.js) in which I want an edit link that will direct to a controller/action. I quite like what knockout provides for me in terms of MVVM, but uncertain if I’m trying to mix apples and oranges by specifying an action link in a knockout view. I’d like to knock what is the best way to accomplish this?

Thanks in advance!

<p>
  <b><span data-bind='text: Title'></span></b>
  <span data-bind='text: ArticleDate'></span>
</p>
<span data-bind='text: BodyText'></span>

Something like

<a data-bind="attr: { 'href': '@Url.Action("Details" .. ?

The Model

    public class SecureModel
    {
       public SecureModel()
       {

       }

       private List<Article> _articles;

       public List<Article> Announcements
       {
          get
          {
              return _articles;
          }
          set
          {
              _articles = value;
          }
       }
    }

View

    @model UI.Models.SecureModel
    @{
      ViewBag.Title = "Announcements";
    }
    var viewModel = {

    isEditable: ko.observable(false),
    articles: ko.mapping.fromJS([]),
    loadInitialData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.articles);
    },
    loadUpdatedData: function () {
        ko.mapping.fromJS(serverData, dataMappingOptions, viewModel.articles);
    }
};

Answer 1

If I’m reading your code right then you have already scoped to the Article since your first KO data-bind samples show Title, ArticleDate, etc…. It’s a little hard to tell since you don’t show what Article has for properties…

If this is the case you should be able to do something like this:

<a data-bind="attr: { 'href': '@Url.Action("Details", "ControllerName", new {actionParameterName=ArticleModelKeyFieldName}">Details</a>

Where actionParameterName is the name of the parameter in your action and ArticleModelKeyFieldName is the key field on your Articles Model.

So if you had an action like:

public ActionResult Details(int articleId)
{
....
}

Then actionParameterName would be articleId.