2

See below.

First, the script gets 4 items from Github API and renders a list. If you submit 'NEXT' button, the script re-draws the list after re-sends Get request.

GET request.

repo.Repo.getList = function (api) {
    return m.request({
        method: "GET",
        url: api,
        type: repo.Repo,
        extract: repo.linkHeader.setLinkHeader,
        initialValue: []
    })
        .then(function (data) {
        // bad solution.
        return repo.vm.list(repo.vm.list().concat(data));
    });
};

Concat Array.

repo.vm.api(links['next'])
return m('button', {onclick: repo.vm.add}, 'NEXT');

It works just as expected. But, It is bad solution, aren't you? I think this concat process should be completed in View-Model (repo.vm).

Is there any good method? Or is this all right?

1 Answers1

1

It's not ideal to modify things in the view method. Consider the view a template, that should only display state, since redraws can happen quite rapidly. Instead you should let the controller do the request, and modify state when the request is finished. Then the view will be displayed.

Code-wise, I think you're a bit deep into "too much structure". There are viewmodels, a LinkHeader prototype, and the program flow jumps all over the place. The mental model is quite simple, so keep it that way instead of getting into patterns that will only make things abstract and complicated.

Here's my take on it: https://jsfiddle.net/ciscoheat/akwdqhpx/

The parser is the same, but after that I've tried to keep the code compressed and local, so you can look at a part of the code and understand it. Here's a very good article about locality and cohesion. I've also changed a few names to keep closer to the mental model.

ciscoheat
  • 3,719
  • 1
  • 35
  • 52